How to generate a simple popup using jQuery

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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 class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

<a href="/contact" id="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 class="messagepop pop"></div> 
    <a href="/contact" id="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;
});

Solution 2 - Javascript

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

The jQuery:

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

The markup:

<div id="dialog" 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.

Solution 3 - Javascript

I use a jQuery plugin called ColorBox, it is

Very easy to use
lightweight
customizable
the nicest popup dialog I have seen for jQuery yet

Solution 4 - Javascript

Visit this url

Jquery UI Dialog Demos

Solution 5 - Javascript

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

Solution 6 - Javascript

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

Solution 7 - Javascript

There is a good, simple example of exactly this, here: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Solution 8 - Javascript

Extremely Lightweight Modal popup plugin. POPELT - http://welbour.com/labs/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.

Solution 9 - Javascript

Simple popup window by using html5 and javascript.

html:-

    <dialog id="window">  
     <h3>Sample Dialog!</h3>  
     <p>Lorem ipsum dolor sit amet</p>  
     <button id="exit">Close Dialog</button>
    </dialog>  
    
  <button id="show">Show Dialog</button>

JavaScript:-

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

Solution 10 - Javascript

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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head> 

<body>
	<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup 
		Preview</a>
		 
		<div class="popup" popup-name="popup-1">
			<div class="popup-content">
			<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 class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
			</div>
		</div>	
</body>
</html>

Solution 11 - Javascript

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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			var modal = (function(){
				// Generate the HTML and add it to the document
				$modal = $('<div id="modal"></div>');
				$content = $('<div id="content"></div>');
				$close = $('<a id="close" 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: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Here's close.png for the sample.

Solution 12 - Javascript

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

            <a href="#openModal">OPEN</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close"  class="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);
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Rajasekar	View Question on Stackoverflow
Solution 1 - Javascript	Andy Gaskell	View Answer on Stackoverflow
Solution 2 - Javascript	karim79	View Answer on Stackoverflow
Solution 3 - Javascript	JasonDavis	View Answer on Stackoverflow
Solution 4 - Javascript	Yanni	View Answer on Stackoverflow
Solution 5 - Javascript	Marvin3	View Answer on Stackoverflow
Solution 6 - Javascript	andy boot	View Answer on Stackoverflow
Solution 7 - Javascript	Evernoob	View Answer on Stackoverflow
Solution 8 - Javascript	scazzy	View Answer on Stackoverflow
Solution 9 - Javascript	Arshid KV	View Answer on Stackoverflow
Solution 10 - Javascript	Devsaiful	View Answer on Stackoverflow
Solution 11 - Javascript	John29	View Answer on Stackoverflow
Solution 12 - Javascript	zloctb	View Answer on Stackoverflow