Como gerar um pop-up simples usando jQuery

Eu estou projetando uma página web. Quando clicamos no conteúdo do e-mail denominado div, como posso mostrar uma janela pop-up contendo um e-mail de label e uma checkbox de texto?

    Primeiro o CSS – ajuste isso como quiser:

    a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px; } label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px; } .messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px; } 

    E o JavaScript:

     function deselect(e) { $('.pop').slideFadeToggle(function() { e.removeClass('selected'); }); } $(function() { $('#contact').on('click', function() { if($(this).hasClass('selected')) { deselect($(this)); } else { $(this).addClass('selected'); $('.pop').slideFadeToggle(); } return false; }); $('.close').on('click', function() { deselect($('#contact')); return false; }); }); $.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); }; 

    E finalmente o html:

     

    or Cancel

    Contact Us

    Aqui está uma demonstração e implementação jsfiddle.

    Dependendo da situação, você pode querer carregar o conteúdo do popup por meio de uma chamada ajax. É melhor evitar isso, se possível, pois isso pode dar ao usuário um atraso mais significativo antes de ver o conteúdo. Aqui algumas mudanças que você vai querer fazer se você adotar essa abordagem.

    HTML torna-se:

      

    E a ideia geral do JavaScript torna-se:

     $("#contact").on('click', function() { if($(this).hasClass("selected")) { deselect(); } else { $(this).addClass("selected"); $.get(this.href, function(data) { $(".pop").html(data).slideFadeToggle(function() { $("input[type=text]:first").focus(); }); } } return false; }); 

    Confira o jQuery UI Dialog . Você usaria assim:

    O jQuery:

     $(document).ready(function() { $("#dialog").dialog(); }); 

    A marcação:

     
    I'm in a dialog

    Feito!

    Tenha em mente que é sobre o caso de uso mais simples que existe, sugiro ler a documentação para ter uma idéia melhor do que pode ser feito com ela.

    Eu uso um plugin jQuery chamado ColorBox , é

    1. Muito fácil de usar
    2. peso leve
    3. Customizável
    4. a melhor janela pop-up que já vi para o jQuery

    Visite este URL

    Jquery UI Dialog Demos

    Experimente o Magnific Popup , é responsivo e pesa apenas cerca de 3KB.

    Eu acho que este é um ótimo tutorial sobre como escrever um simples pop-up de jquery. Além disso, parece muito bonito

    Há um exemplo simples e bom de exatamente isso aqui: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

    Plugin de popup Modal extremamente leve. POPELT – http://welbour.com/labs/popelt/

    É leve, suporta pop-ups nesteds, orientada a objects, suporta botões dynamics, responsivos e muito mais. A próxima atualização includeá submissões de formulários do Popup Ajax, etc.

    Sinta-se livre para usar e twittar feedback.

    Janela pop-up simples usando html5 e javascript.

    html: –

       

    Sample Dialog!

    Lorem ipsum dolor sit amet

    JavaScript: –

      (function() { var dialog = document.getElementById('window'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('exit').onclick = function() { dialog.close(); }; })(); 

    Aqui está um popup muito simples:

     < !DOCTYPE html>        Simple popup   

    Uma solução mais flexível pode ser encontrada neste tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Aqui está close.png para a amostra.

    SOMENTE LÓGICA DE POPUP DO CSS! Tente fazer isso. FÁCIL! Eu acho que este mybe ser hackear popular no futuro

      OPEN 
    X

    MODAL

    .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .modalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }