How to pop up a window in a new URL, as well as hide the current window and prevent clicks (possibly using jQuery)

Question

I usually use "window.open" to open a popup in a new URL. How to open a window in a new URL, shade / gray from the current window, and when closed, remove the shadow background.

Is it better to use jQuery for this? Can I use the default libraries without using jquery plugins?

I want to do something like this and then "turn off" my shadow when unloading. Hope this uses jQuery core libraries or standard javascript calls. I want to avoid using any plugins besides jQuery.

var popup = window.open('http://google.com', 'popup'); showShadow(); $(window).unload(function() { if(!popup.closed) { disableShadow(); } }); 

Answer 1

Basically, you can open a pop-up window and set this window before downloading. In short, something like this:

 popup = window.open("", "name", "width=400, height=300") popup.onbeforeunload = function() { $('#shadow').hide();} 

I created a violin for you.

http://jsfiddle.net/DDksS/

Answer 2

So, you want to create your own modal block using jQuery instead of using an existing plugin? ... OK, let it play (as already mentioned, using pop-ups is not a user-friendly solution):

Your checklist:

  - the trigger - the shadow layer - the modal box size and position - add content to modal and display it along the shadow 

1) A trigger is a simple html link to open content inside a modal

 <a href="http://jsfiddle.net" class="myModal" data-width="400" data-height="300">open url</a> 

... we will pass the size of the modality through the data-width and data-height attributes (HTML5).

2) The shadow level is the html structure that we will add to the body after the trigger. We can set the structure in js variable

 var shadow = "<div class='shadow'></div>"; 

3) As we already mentioned, the size of the modality is set via some data-* attributes in the link. We will need to do the math

 var modalWidth = $(this).data("width"); var modalHeight = $(this).data("height"); var modalX = (($(window).innerWidth()) - modalWidth) / 2; // left position var modalY = (($(window).innerHeight()) - modalHeight) / 2; // top position 

NOTE : $(this) is our .myModal trigger .myModal , which we will later enter the .on("click") method. BTW, .on() method requires jQuery v1.7 +

4) Now we need to create a modal html structure and pass the contents of href . We will create a function

 function modal(url) { return '<div id="modal"><a id="closeModal" title="close" href="javascript:;"><img src="http://findicons.com/files/icons/2212/carpelinx/64/fileclose.png" alt="close" /></a><iframe src="' + url + '"></iframe></div>'; } 

... as you can see, our structure contains a close button to remove the modal and shadow layer. The function also receives a parameter when called ( url ), which allows you to set the src attribute of the iframe tag.

NOTE : we must use the iframe tag to open external URLs, however we must always consider the same origin of the policy and other security restrictions when using iframes.

So now we have to collect all the events after we click on our .myModal trigger, which adds a shadow and a modal field to the body and removes them when we click the close button, therefore

 $(".myModal").on("click", function(e) { e.preventDefault(); // get size and position modalWidth = $(this).data("width"); modalHeight = $(this).data("height"); modalX = (($(window).innerWidth()) - modalWidth) / 2; modalY = (($(window).innerHeight()) - modalHeight) / 2; // append shadow layer $(shadow).prependTo("body").css({ "opacity": 0.7 }); // append modal (call modal() and pass url) $(modal(this.href)).appendTo("body").css({ "top": modalY, "left": modalX, "width": modalWidth, "height": modalHeight }); // close and remove $("#closeModal").on("click", function() { $("#modal, .shadow").remove(); }); }); // on 

STYLE : of course, we will need some basic CSS style for our modal elements to work correctly:

 .shadow {width: 100%; height: 100%; position: fixed; background-color: #444; top: 0; left:0; z-index: 400} #modal {z-index: 500; position: absolute; background: #fff; top: 50px;} #modal iframe {width: 100%; height: 100%} #closeModal {position: absolute; top: -15px; right: -15px; font-size: 0.8em; } #closeModal img {width: 30px; height: 30px;} 

* WATCH DEMO *

BONUS : you can also bind a keyup event to close the modal key with the escape key

 $(document).keyup(function(event) { if (event.keyCode === 27) { $("#modal, .shadow").remove(); } }); //keyup 

LAST NOTE : The code is subject to many improvements and optimizations, but is the main location of many lightboxes. My last recommendation: use fancybox for more advanced functionality ... sometimes you should not try to reinvent the wheel; )

Answer 3

Using Javascript to create new pop-ups is the 1990s, not to mention not very user friendly. What you are looking for, both UI-wise and look-a-modal dialogue; There are billions of examples and pre-packaged jquery snippets on how to create modal dialogs, and most client user interface interfaces like jQuery UI, YUI, and Bootstrap have built-in dialog dialog functionality. I would recommend diving into them.

Answer 4

Try using jquery plugins like fancybox http://fancybox.net/

Answer 5

Basically, you need to attach the event listener to a new window in order to run the disableShadow () function on your web page.

If you add this to your code, I think it should work.

 popup.unload(function() { disableShadow() }); 

Adapted from: Attach the onload handler in a window opened by Javascript

Answer 6

You should use the beforeUnload event of the beforeUnload instance returned by calling window.open() , for example:

 popup = window.open('relative_url', 'popup'); $(popup).bind('beforeunload', function() { disableShadow(); }); 

Please note that the URL must be in the same domain for the opener window to interact with the pop-up menu!

See the fiddle here: http://jsfiddle.net/hongaar/QCABh/

Answer 7

All you need is the standard showModalDialog javascript function . Then your code will look like

 var url = 'http://google.com'; showShadow(); var optionalReturnValue = showModalDialog(url); //Following code will be executed AFTER you return (close) popup window/dialog hideShadow(); 

UPDATE As gongaar said, Opera doesn't like showModalDialog. And it does not start (until) unloading when the popup closes. To make a workaround, you need a timer (window.setTimeout) to periodically check if a window exists. See here for more details.

Answer 8

You can open a new window, and when it closes, you can execute the function in the window that opens.

I will make a quick example by entering the script directly into a new window, but you can also just include it in the HTML that is used for the new window if there is a link for the popup:

 $("#popupBtn").on('click', openPopup); //using a button to open popup function openPopup() { $('#cover').fadeIn(400); var left = ($(window).width()/2)-(200/2), top = ($(window).height()/2)-(150/2), pop = window.open ("", "popup", "width=400, height=300, top="+top+", left="+left), html = '<!DOCTYPE html>'; html += '<head>'; html += '<title>My Popup</title>'; html += '<scr'+'ipt type="text/javascript">'; html += 'window.onbeforeunload = function() { window.opener.fadeoutBG(); }'; html += '</sc'+'ript>'; html += '</head>'; html += '<body bgcolor=black>'; html += '<center><b><h2 style="color: #fff;">Welcome to my most excellent popup!</h2></b></center><br><br>'; html += '<center><b><h2 style="color: #fff;">Now close me!</h2></b></center>'; html += '</body></html>'; pop.document.write(html); } window.fadeoutBG = function() { //function to call from popup $('#cover').fadeOut(400); } 

Using a fixed cover that fades out will also prevent any clicks on elements on the page, and you can even bind the click handler to the cover with pop.close() to close the popup if you click on the cover, just like a modal will close if you went beyond it.

One of the advantages of calling a function on the parent page from a popup is that the values ​​can be passed from the popup to the parent, and you can do many things that otherwise could not.

FULLSCREEN_FIDDLE

Fiddle

Answer 9

Why don't you just use jQuery UI? I know that you do not need another library, but rather a jQuery extension, and not another lib, since it can live without it. It has a large widget, and each of them can be changed, customized. What's best is that it can be viewed with various topics, even you can create it using the movie clip quickly and easily, and it can be modular. Just take what you need in the current project. Check this:

http://jqueryui.com/dialog/#modal-form

It is very easy to use. With this, you can open a modal dialog with a frame at a different URL. In a closed event, you can do whatever you want.

Answer 10

Try ColorBox

its simple and easy to use

http://www.jacklmoore.com/colorbox

quick example:

 <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); }); </script> <a class='iframe' href="http://google.com">Outside Webpage (Iframe)</a> 

Answer 11

You can also try this ... http://fancyapps.com/fancybox/

Examples here

Answer 12

try http://thickbox.net/ in the modal type, examples: http://thickbox.net/#examples

Answer 13

I did it too.

Firstly, some URLs just DO NOT WORK in a modal window (iframe); I can’t say whether it will work in browser-supported native modal windows, since I have not tried this. Download google or facebook in an iframe and see what happens.

Secondly, things like onunload events in a window do not always work (as we have seen, some people).

The accepted version of the response will also work only on a static page. Any reload (even F5 on the page) will cause the shadow to hide. . Since I cannot comment on the accepted answer, at least I wanted it to be known to someone who looked at these results.

I used a less technical approach to solving this problem in the past: a survey.

http://jsfiddle.net/N8AqH/

 <html> <head> <script type="text/javascript"> function openWindow(url) { var wnd = window.open(url); var timer = null; var poll = function() { if(wnd.closed) { alert('not opened'); clearInterval(timer); } }; timer = setInterval(poll, 1000); } </script> </head> <body> <a href="#" onclick="openWindow('http://www.google.com'); return false;">click me</a> </body> </html> 

See the link above for an example. I tested in IE, FF and Chrome. My timer runs every 1 second, but the browser effort is so low that you can easily reset it to 100 ms or so if you want it to feel more instant.

All you need to do in this example is to call the "show shadow" function after calling window.open and instead of the warning when closing, call the "hide shadow" function, and it should achieve that search.