Beautiful pop-up window on click. MooTools plugin "LightFace" for implementing Facebook dialog boxes

This is a lightweight JQuery modal popup plugin (only 1.49KB). The script doesn't create or style the popup, but it does provide you with all the logic for centering, modal overlay, event, and more. This gives you a lot of customization options to suit your needs.

2. Messi

This is a JQuery plugin to show a clean, elegant message. With Messi, you will avoid using defaults, alarm notifications or new windows to provide enhanced information to the user.

3.Shadowbox.js

Standard viewing application that supports all the most popular formats web media publishing.

4. jQuery Impromptu

An extension to help provide a more enjoyable way to spontaneously entice a user to login. More or less, it's a great replacement for alerts.

Demo

A jQuery plugin to help you display notifications, dialogs, and modals in your web browser.

Demo

6. Colorbox – a jQuery lightbox

Lightweight, customizable lightbox plugin for jQuery

Demo

Provides quick way show data without reloading the page.

Demo

8. jQuery Speedo Popup

Small, powerful and customizable JQuery Popup/modal plugin. Built on HTML5 and CSS3.

Demo

9. Boxy

Flexible dialog box, Facebook style for JQuery with support for drag and drop and frame sizing. It differs from other overlays I've seen by providing an object interface for managing dialog boxes after they've been created.

A lightweight jQuery plugin that provides a powerful window interface. Think of it as a modal window.

Demo

11. Smooth Popup

How to create a stunning and large popup from scratch using JQuery in a simple and clean tutorial...

Demo

12. Exit Modal Box

Do you need to show a specific message to visitors who leave your site? You can do this by initiating a modal window before they close the browser window.

Demo

13. jQuery BlockUI Plugin

Allows you to simulate synchronous behavior when using AJAX, without blocking the browser. When enabled, it will prevent user activity from the page (or part of the page) until it is disabled. BlockUI adds elements to the DOM to give it appearance and behavior blocking user interactions.

Demo

14. Tickbox

Widget user interface web pages are written in JavaScript at the top jQuery libraries. Its function is to show a single image, multiple images, embedded content, iframed content, or content served via AJAX in a hybrid form.

17. Simple jQuery Modal

Create a modal window using Jquery

18. Likno Web Modal Windows Builder

Likno Web Builder is powerful WYSIWYG software to create awesome JQuery modal windows, dialog boxes, modal slideshows, pop-ups, etc. The app generates all the code needed so no programming skills are required. All results are cross-browser, cross-CMS and cross-device.

1. Modal window on jQuery “Simple Modal Box” 2. jQuery plugin “LeanModal”

Displaying content in modal windows. To see the plugin in action on the demo page, click on the link: Sign Up Form or Basic Content.

3. jQuery plugin “ToastMessage”

Pop-up messages. The plugin comes in two versions. In one case, messages disappear on their own after a certain time, in the second implementation, in order to close a message, you need to click on a button.

4. Content that pops up in a modal window

Plugin "Reveal". To see the plugin in action, click on the “Fire A Reveal Modal” button on the demo page.

5. Cute Dialog Boxes

Click on the cross on the demo page to see the plugin in action.

6. Mootools modal window, “MooDialog” plugin

7. jQuery popup panel at the top of the screen

8. jQuery popup window

jQuery plugin for form display feedback in a pop-up window.

10. MooTools plugin “LightFace” for implementing Facebook dialog boxes

Facebook style dialog boxes. In addition to static information, you can place images, frames, and Ajax requests in windows. There are a lot of settings for how the plugin works, very powerful tool. Looks very stylish and functional. Follow the links on the demo page to see examples with different content.

11. jQuery modal window

A neat popup dialog in jQuery.

12. jQuery modal windows

Cute pop-up modal windows. Three styles. The demo page contains 3 links to open windows.

13. jQuery modal windows

Pop-up modal windows of several types. To see the plugin in action, click on the link on the demo page.

15. Message that pops up on top of the page

The message is displayed on top of the page, which in turn is dimmed. Click on “Click me” on the demo page to see a pop-up message. Clicking on the cross will close it. Implemented with using jQuery.

16. Modal window “ModalBox” in javascript

Implement modern modal dialogs without using pop-ups and page reloads. On the demo page, click on the “Start Demo” button to see the script in action.

17. “Leightbox” plugin using the Prototype library

Plugin for displaying content in modal windows.

3. Example of a jQuery modal window called from a link (from Demo)

Most likely, you have already seen a pop-up modal window on the Internet more than once - registration confirmation, warning, background information, file download and much more. In this tutorial I will offer several examples on how to create the simplest modal windows.

Creating a simple pop-up modal window Let's start looking at the code for a simple modal window that will immediately appear
jQuery code

$(document).ready(function()
{
alert("Text in pop-up window");
});

Paste the code anywhere in the body of your page. Immediately after the page loads, without any commands, you will see a window that looks like this:

But the following code will be executed after the entire page is loaded into the browser. In our example, after loading the page with images, a simple pop-up window will pop up:

$(window).load(function()
{
alert("Page has completed loading!)");
});

Calling a jQuery modal window from a link with CSS The next step is to create a modal window when the link is clicked. The background will slowly darken.

You can often see that the login and registration forms are located in such windows. Let's get down to business

First, let's write the html part. We place this code in the body of your document.

Calling a modal window

Modal window text
Close
Text in a modal window.

CSS code. Either in separate css file, or in in head.

body (
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#mask (
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes.window (
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog (
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top(
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
float:right;
}
.content(
padding-top: 35px;
}

In the jQuery code, we will focus on the position of the modal window and the mask, in our case the gradual darkening of the background.

Attention! Don't forget to include the library in the head of the document!

Connecting the library from the Google website. Well, the jQuery code itself.

jQuery code

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});

External popup windows with advertising are terrible ideas! All sane webmasters will never advise you to use them on your site. But if we're talking about about internal popup windows - this useful element which gives additional information, warns, prevents, gives choice and much more.

What will we create?

In this tutorial we will create a simple and beautiful popup window in jquery. It will be similar to what is used on twitter. Naturally, you can give it the style you like.

What functionality will the window have?

• We want it to be centered on the site page when it is displayed.
• There should be a “close” button or something similar.
• When we click outside the block, the popup window will close automatically.
• When the window is displayed, the page should be covered in shadow so that the user can focus.

Let's start development

To implement a popup window, we will use CSS and several jQuery strings code, and of course HTML. Please note that to implement our idea, you do not need any plugins or additional tools, everything is very simple and reliable!

Click me X Some Title Goes Here: Some more content, for when you want to add a little bit more

Popup-box ( position: absolute; border-radius: 5px; background: #fff; display: none; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); font-family: Arial, sans-serif ; z-index: 9999999; font-size: 14px; .popup-box .close ( position: absolute; top: 0px; right: 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold ; cursor: pointer; color: #434343; font-size: 20px; .popup-box .close:hover ( color: #000; ) .popup-box h2 ( padding: 0; margin: 0; font-size: 18px; ) .popup-box .top ( padding: 20px; ) .popup-box .bottom ( background: #eee; border-top: 1px solid #e5e5e5; padding: 20px; border-bottom-left- radius: 5px; border-bottom-right-radius: 5px; ) #blackout ( background: rgba(0,0,0,0.3); position: absolute; top: 0; overflow: hidden; z-index: 999999; left : 0; display: none;

We will define some others CSS styles V JavaScript code. These styles require additional computation, so it would be better to do it using jQuery. Let's move on to the javascript code.

jQuery window popup code

To get started, connect jQuery file libraries. After that, we initialize jQuery and add the #blackout div to the body of the document. We also determine the width of the popup window.

$(document).ready(function() ( $("body").append(""); var boxWidth = 400;

Next, we create a function that centers the window. Previously we set absolute positioning in CSS, we can't use margin: 0px auto; we need to determine the width of the screen, subtract the width of the popup window from this, and divide all this by 2. The height will be current position scroll, plus about 150px.

A little earlier we created a #blackout div, this is to cover the page content with a shadow. Now we need to make sure that this block will have the same width and height as the monitor. This is also calculated in this function.

function centerBox() ( /* define the required data */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); /* Calculate the position */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* Add styles to the blocks */ $(".popup-box").css(("width" : boxWidth+"px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+"px") ; return false ;

This function must be run 3 times. When the user scrolls, when the user resizes the window, also initially when the page loads.

$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();

Finally, we need to set up click events. When the user clicks in an area outside the window, it should close. When the user clicks on the "X", the window should also disappear. In case of clicks inside the popup window, nothing should happen. Comments have been added to the code to make it easier to understand.

$("").click(function(e) ( /* Prevent default actions */ e.preventDefault(); e.stopPropagation(); /* Get id ( last number in the link class name) */ var name = $(this).attr("class"); var id = name; var scrollPos = $(window).scrollTop(); /* Correct display of popup window, covering with shadow, preventing scrolling */ $("#popup-box-"+id).show(); $("#blackout").show(); $("html,body").css("overflow", "hidden"); /* Fixing a bug in Firefox */ $("html").scrollTop(scrollPos); )); $("").click(function(e) ( /* Prevent the link from working if it is our popup window */ e.stopPropagation(); )); $("html").click(function() ( var scrollPos = $(window).scrollTop(); /* Hide the window when clicked outside its area */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); )); $(".close").click(function() ( var scrollPos = $(window).scrollTop(); /* Hide the shadow and window when the user clicks on X */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos)); ));

With this, creating a popup window using jQuery is complete! We don't need to download plugins and write complex functions, just a few lines of code. You can download the sources and see how it works locally on your computer.

Today we will show you how to make a jquery popup window to show hidden content upon request, for example to show . It's quite easy to do, read to the end.

How to make a popup window jquery

A jquery popup window consists of the following elements:

• background or shading
• popup window
• popup content

So, as always, let's start with the HTML layout first.

Popup title X

Popup content, contact form or whatever you need.

Done, we already have an overlay (.popup_overlay), a popup window (.popup), a popup title (.popup_title), a popup close button (.closer), and a popup content (.popup_content).

Now we need to make sure that this popup appears as a popup rather than just sitting there, and that the shading overlaps the background.

Popup_overlay( display: none; background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; ) .popup( display: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,1); width: 600px; position: fixed; left: 50%; 300px; margin-top: -250px; ) .popup_title( font-weight: bold; padding: 10px; ) .popup_content( padding: 10px; border-top: 1px solid #ccc; ) .closer( float: right; cursor: pointer)

Ready. The popup window is jquery styled. If you noticed, the pop-up window itself and the dimming have display: none, this is done so that the pop-up window does not appear on the site until the right moment. Now let's add a popup window to right moment(that is, by clicking on the desired button).

jquery popup window
Well, now the jquery code. Everything is quite simple. We bind the action to the click event on the desired button.

$(function())( $("button").click(function())( $(".popup,.popup_overlay").fadeIn(400); //show the popup window )); $(".closer,. popup_overlay").click(function())( $(".popup,.popup_overlay").fadeOut(400); // hide the popup window )); ));

Ready. The popup will be shown and hidden when we need it (when we click the button and the .closer button respectively).