background Background full e adaptável a desktop e mobile

[abstein 0]

E aí galera... Estou com um problema (bobo) mas está me travando em um trabalho.

 

Eu queria elaborar uma página de entrada para um site, pode ser uma página de home, tipo uma pop up apenas com imagem (e texto oculto, se possível) que aparecesse full (tanto no desktop quanto mobile) no primeiro acesso a página principal.

 

Essa imagem, quando clicada, a de dar acesso a outra página, mas isso é detalhe.

 

Espero terem compreendido. Se alguém puder me dar uma mão agradeço, pois já tentei html e não consegui embutir o css no html. O site é hospedado no Wordpress.

 

Valeu.

 

Se tiverem uma solução, tipo uma página inicial de loading, algo assim, é bem vindo, pois quero apenas uma página de entrada.

[stromdh 15]

cara, uma vez precisei de algo parecido, um popup fullscreen mas com o botão de fechar e que ficasse centralizada na página. usei o jquery pra fazer.

 

o site carrega e abre o background do popup todo preto com uma transparencia e a imagem abre logo na sequencia, tudo com fade. deve ter algum plugin em wp que faça isso, mas caso tu precisar da um grito que eu posto o código do que eu fiz.

[abstein 0]

cara, uma vez precisei de algo parecido, um popup fullscreen mas com o botão de fechar e que ficasse centralizada na página. usei o jquery pra fazer.

 

o site carrega e abre o background do popup todo preto com uma transparencia e a imagem abre logo na sequencia, tudo com fade. deve ter algum plugin em wp que faça isso, mas caso tu precisar da um grito que eu posto o código do que eu fiz.

 

Cara, aceito o código se tu o tiver, vai ser de grande ajuda.

[stromdh 15]

esse aqui tu coloca no teu html:

<div id="boxes">
    <div id="dialog" class="window">
        <div class="fecha close"><i class="icon-cancel-circle"></i></div>
        <img src="path/imagem que abre sobre o fundo preto"/>
    </div>
    <div id="mask"></div>
</div>

esse aqui é o javascript que tu chama. cria um arquivo js e cola esse código dentro

$(document).ready(function () {

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

    //transition effect
    $('#mask').fadeIn(500);
    $('#mask').fadeTo("slow", 0.9);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);

    //transition effect
    $(id).fadeIn(2000);

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

    //if mask is clicked
    $('#close').click(function () {
        $(this).hide();
        $('.window').hide();
    });

});

é importante que tu esteja chamando o jquery, se não não funciona. se tu quiser pode substituir a imagem por uma div ou outra coisa do tipo