1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Modal Jquery aparecer na posição em que o usuário vê

Bom dia :>

Pois então, eu criei um modal pro meu site, só que ele deveria aparecer na altura onde o usuário está vendo, ao invés disso ele aparece centralizado apenas no topo da pagina.

Segue meu código :>

Html

        <div id="dialog" class="window">
            <a href="#" class="close">Fechar [X]</a><br /><br /><br />
            <b></b>
        </div>
        <div id="mask"></div>

css

#mask {position: absolute; z-index: 9000; background-color: #000; display: none; top: 0px; left: 0px;}
.window {position: absolute; width: 440px; height: 200px; display: none; z-index: 9090; padding: 20px; background-color: #fff;}
#dialog {width: 375px; height: 203px; border: 5px solid #d32d2d;}
.close {display: block; text-align: right;}

Javascript

    function showMessageDialog(txt) {

        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        $('#dialog b').text(txt);

        $('#mask').css({'width' : maskWidth, 'height' : maskHeight});

        $('#mask').fadeIn(1000);
        $('#mask').fadeTo('slow',0.8);

        var winH = $(window).height();
        var winW = $(window).width();

        $('#dialog').css('top', winH/2-$('#dialog').height()/2);
        $('#dialog').css('left', winW/2-$('#dialog').width()/2);

        $('#dialog').fadeIn(2000);

    }

    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask, .window').hide();
    });

    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

Alguém tem alguma dica de como fazer o modal aparecer exatamente onde o usuário está vendo? ou então fazer o modal acompanhar a rolagem da pagina tbm seria interessante :>

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery javascript html css ou faça a sua própria pergunta.