How to Generate a Simple Popup Using Jquery

How to generate a simple popup using jQuery

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

How can I open a popup window using JQuery?

Here is a solution. Yo can try

 $(document).ready(function () {
$("#OpenDialog").click(function () {
//$("#dialog").dialog({modal: true, height: 590, width: 1005 });
var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
var $w = $(w.document.body);
$w.html("<textarea></textarea>");
});
});

Here is the edited jsfiddle https://jsfiddle.net/bac8qdq1/13/

How to open popup with jquery

Have a look at the documentation https://jqueryui.com/dialog/. There is also a complete example on the site. Obviously you just forgot to add the jquery ui dependency.

Simple popup using jQuery

Frederic Hamidi commented first, but thought of including it as my answer since he didn't answer it.

Saw your edit. You are including jquery 1.9.1 where .live() is removed.

Use .on() instead.

jQuery: How to open a new modal dialog or popup window

This is JavaScript solution from w3school.com

Try it :

// Get the modalvar modal = document.getElementById("myModal");
// Get the button that opens the modalvar btn = document.getElementById("myBtn");
// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block";}
// When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";}
// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }}
/* The Modal (background) */.modal {  display: none; /* Hidden by default */  position: fixed; /* Stay in place */  z-index: 1; /* Sit on top */  padding-top: 100px; /* Location of the box */  left: 0;  top: 0;  width: 100%; /* Full width */  height: 100%; /* Full height */  overflow: auto; /* Enable scroll if needed */  background-color: rgb(0,0,0); /* Fallback color */  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
/* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%;}
/* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer;}
<!-- Trigger/Open The Modal --><button id="myBtn">Open Modal</button>
<!-- The Modal --><div id="myModal" class="modal">
<!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <p>Place Your Content Here ..</p> </div>
</div>

How to Show Hide and Show modal popups using jQuery

I dont know if I understand exactly what you want but, I did a full working exemple using your plugin : Tell me if you need more explanations

$(function(){
var appendthis = ("<div class='modal-overlay js-modal-close'></div>");
$('a[data-modal-id]').click(function(e) { e.preventDefault(); $("body").append(appendthis); $(".modal-overlay").fadeTo(500, 0.7); //$(".js-modalbox").fadeIn(500); var modalBox = $(this).attr('data-modal-id'); $('#'+modalBox).fadeIn($(this).data()); $('#popup .modal-body').html($('#registerContent').html()); }); $(".js-modal-close, .modal-overlay").click(function() { $(".modal-box, .modal-overlay").fadeOut(500, function() { $(".modal-overlay").remove(); });});
$(window).resize(function() { $(".modal-box").css({ top: ($(window).height() - $(".modal-box").outerHeight()) / 2, left: ($(window).width() - $(".modal-box").outerWidth()) / 2 });}); $(window).resize(); });
$(document ).ready(function(e) { $(document).on("click",".openRegister",function(e) { e.preventDefault(); $('#popup .modal-body').html($('#loginContent').html()); }); $(document).on("click",".openLogin",function(e) { e.preventDefault(); $('#popup .modal-body').html($('#registerContent').html()); });});
.modal-box {  display: none;  position: absolute;  z-index: 1000;  width: 98%;  background: white;  border-bottom: 1px solid #aaa;  border-radius: 4px;  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);  border: 1px solid rgba(0, 0, 0, 0.1);  background-clip: padding-box;}
.modal-box header,.modal-box .modal-header { padding: 1.25em 1.5em; border-bottom: 1px solid #ddd;}
.modal-box header h3,.modal-box header h4,.modal-box .modal-header h3,.modal-box .modal-header h4 { margin: 0; }
.modal-box .modal-body { padding: 2em 1.5em; }
.modal-box footer,.modal-box .modal-footer { padding: 1em; border-top: 1px solid #ddd; background: rgba(0, 0, 0, 0.02); text-align: right;}
.modal-overlay { opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3) !important;}
a.close { line-height: 1; font-size: 1.5em; position: absolute; top: 5%; right: 2%; text-decoration: none; color: #bbb;}
a.close:hover { color: #222; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="popup" class="modal-box">   <header>    <a href="#" class="js-modal-close close">×</a>    <h3><a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Title</h3>  </header>  <div class="modal-body">    <p>Login Body</p>    <a href="#" class="openRegister">Register</a>  </div>  <footer>    <a href="#" class="js-modal-close">Close Button</a>  </footer></div>

<div id="loginContent" style="display:none"> <p>Register Body</p> <a href="#" class="openLogin">Login</a></div>
<div id="registerContent" style="display:none"> <p>Login Body</p> <a href="#" class="openRegister">Register</a></div>
<a class="js-open-modal" href="#" data-modal-id="popup"> Click me </a>

Using JQuery to create a pop-up when clicking on a tr in a table

You can use JQuery UI to display a nice popup. This code was made merging your code with the example found here: http://jqueryui.com/dialog/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
</head>
<body>
<script>
function display(test) {
$("#dialog").dialog();
}
</script>
<table>
<tr onclick="display('test');">
<td><strong>showSpeed</strong></td>
<td>15</td>
<td>The speed of the show/reveal</td>
</tr>
</table>

<div id="dialog" title="Basic dialog" style="display:none">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

That's one option. You can also take a look at bootstrap modals found here: http://getbootstrap.com/javascript/#modals



Related Topics



Leave a reply



Submit