How to Make jQuery Popup Window?

advertisement

You might be bore with using javascript window.alert as your popup window on your website since it is not customizable. So, why not to try to use jQuery popup window? With jQuery popup window, you will have a very customizable popup window and it is very easy to use.

How to make jQuery popup window? In jQuery script it is called dialog. It is require of course jQuery script and also jQuery UI script and css. Basically, I will divide this tutorial in two ways. First, by using an element inside the body (div element) and the second, by creating the element inside the script.

How to Make jQuery Popup Window?

To be able to use jQuery popup window, you need to make sure that you have a working link to jQuery.js, jQuery-ui.js and jQuery-ui.css. The link will be like this:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<link href='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css' rel='stylesheet'/>

1.10.1 and 1.10.3 is a version of jQuery I use, it might be different wth yours and "redmond" is the jQuery theme I use, you can find another theme here. If you don't have these lines, just copy the script above before </head> of your page. Remember you must have these three lines to have a working jQuery popup window.

That is all for the preparation, now let's start to make jQuery popup window.

First, make a jQuery popup window from an element inside the body.

Example link

This is an example popup element

The source:

<script>
    $(document).ready(function() {
        popup = function() {
            $("#popdiv").dialog();
        }
    });
</script>
<input type="submit" onclick="javascript:popup()" value="Example Button"/>
<a href="javascript:popup()">Example link</a>

<div id="popdiv">This is an example popup element</div>

When you click Example button or Link, it will bring the element with "popdiv" ID as popup window. If you want experimenting more, please go to this link http://jsfiddle.net/swQGE/.

Second, make a jQuery popup window by creating element from the script.

Example link

The source:

<script>
    $(document).ready(function() {
        popup = function() {
            $("<div>This is an example popup element</div>").dialog();
        }
    });
</script>
<input type="submit" onclick="javascript:popup()" value="Example Button"/>
<a href="javascript:popup()">Example link</a>

When you click Example Button or link, jQuery will create a popup element from the script. Here is the link to practice about it http://jsfiddle.net/swQGE/1/

Still having problem on How to make jQuery Popup Window? please use the comment form below.

---

Categories:

Similar to How to Make jQuery Popup Window?:

Post a Comment/Report Broken Link: