background Background full e adaptável a desktop e mobile

abstein · Dezembro 7, 2015

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 · Dezembro 9, 2015

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 · Dezembro 10, 2015

Em 09/12/2015 at 20:03, stromdh disse:

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 · Dezembro 10, 2015

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();
    });

});