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:

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