I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

1

12 Answers

First the CSS - tweak this however you like:

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

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

And finally the html:

<div> <form method="post" action="/messages"> <p><label for="email">Your email or name</label><input type="text" size="30" name="email" /></p> <p><label for="body">Message</label><textarea rows="6" name="body" cols="35"></textarea></p> <p><input type="submit" value="Send Message" name="commit"/> or <a href="/">Cancel</a></p> </form> </div> <a href="/contact">Contact Us</a>

Here is a jsfiddle demo and implementation.

Depending on the situation you may want to load the popup content via an ajax call. It's best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you'll want to make if you take this approach.

HTML becomes:

<div> <div></div> <a href="/contact">Contact Us</a> </div>

And the general idea of the JavaScript becomes:

$("#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; });
19

Check out jQuery UI Dialog. You would use it like this:

The jQuery:

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

The markup:

<div title="Dialog Title">I'm in a dialog</div>

Done!

Bear in mind that's about the simplest use-case there is, I would suggest reading the documentation to get a better idea of just what can be done with it.

3

I use a jQuery plugin called ColorBox, it is

  1. Very easy to use
  2. lightweight
  3. customizable
  4. the nicest popup dialog I have seen for jQuery yet

Visit this url

Jquery UI Dialog Demos

Try the Magnific Popup, it's responsive and weights just around 3KB.

I think this is a great tutorial on writing a simple jquery popup. Plus it looks very beautiful

0

There is a good, simple example of exactly this, here:

1

Extremely Lightweight Modal popup plugin. POPELT -

It is lightweight, supports nested popups, object oriented, supports dynamic buttons, responsive, and lot more. Next update will include Popup Ajax form submissions etc.

Feel free to use and tweet feedback.

Simple popup window by using html5 and javascript.

html:-

 <dialog> <h3>Sample Dialog!</h3> <p>Lorem ipsum dolor sit amet</p> <button>Close Dialog</button> </dialog> <button>Show Dialog</button>

JavaScript:-

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

Let's try .... How to create a simple popup by using HTML, CSS, and jquery ...

$(function() { // Open Popup $('[popup-open]').on('click', function() { var popup_name = $(this).attr('popup-open'); $('[popup-name="' + popup_name + '"]').fadeIn(300); }); // Close Popup $('[popup-close]').on('click', function() { var popup_name = $(this).attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }); // Close Popup When Click Outside $('.popup').on('click', function() { var popup_name = $(this).find('[popup-close]').attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }).children().click(function() { return false; }); });
body { font-family:Arial, Helvetica, sans-serif; } p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #484848; } /* Popup Open button */ .open-button{ color:#FFF; background:#0066CC; padding:10px; text-decoration:none; border:1px solid #0157ad; border-radius:3px; } .open-button:hover{ background:#01478e; } .popup { position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); width:100%; height:100%; display:none; } /* Popup inner div */ .popup-content { width: 700px; margin: 0 auto; box-sizing: border-box; padding: 40px; margin-top: 100px; box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .close-button { width: 25px; height: 25px; position: absolute; top: -10px; right: -10px; border-radius: 20px; background: rgba(0,0,0,0.8); font-size: 20px; text-align: center; color: #fff; text-decoration:none; } .close-button:hover { background: rgba(0,0,0,1); } @media screen and (max-width: 720px) { .popup-content { width:90%; } }
<!DOCTYPE html> <html> <head> <title> Popup </title> <script src=""></script> </head> <body> <a popup-open="popup-1" href="javascript:void(0)"> Popup Preview</a> <div popup-name="popup-1"> <div> <h2>Title of Popup </h2> <p>Popup 1 content will be here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat diam ut tortor dignissim, vel accumsan libero venenatis. Nunc pretium volutpat convallis. Integer at metus eget neque hendrerit vestibulum. Aenean vel mattis purus. Fusce condimentum auctor tellus eget ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a popup-close="popup-1" href="javascript:void(0)">x</a> </div> </div> </body> </html>
1

Here is a very simple popup:

<!DOCTYPE html> <html> <head> <style> #modal { position:absolute; background:gray; padding:8px; } #content { background:white; padding:20px; } #close { position:absolute; background:url(close.png); width:24px; height:27px; top:-7px; right:-7px; } </style> <script src=""></script> <script> var modal = (function(){ // Generate the HTML and add it to the document $modal = $('<div></div>'); $content = $('<div></div>'); $close = $('<a href="#"></a>'); $modal.hide(); $modal.append($content, $close); $(document).ready(function(){ $('body').append($modal); }); $close.click(function(e){ e.preventDefault(); $modal.hide(); $content.empty(); }); // Open the modal return function (content) { $content.html(content); // Center the modal in the viewport $modal.css({ top: ($(window).height() - $modal.outerHeight()) / 2, left: ($(window).width() - $modal.outerWidth()) / 2 }); $modal.show(); }; }()); // Wait until the DOM has loaded before querying the document $(document).ready(function(){ $('a#popup').click(function(e){ modal("<p>This is popup's content.</p>"); e.preventDefault(); }); }); </script> </head> <body> <a id='popup' href='#'>Simple popup</a> </body> </html>

More flexible solution can be found in this tutorial: Here's close.png for the sample.

ONLY CSS POPUP LOGIC! TRY DO IT . EASY! I think this mybe be hack popular in future

 <a href="#openModal">OPEN</a> <div> <div> <a href="#close">X</a> <h2>MODAL</h2> </div> </div> .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); }
1