Load code when I open a popup

Question

I need to load some code JS when I load a popup window. I've tried with:

mypopup.ready(function...

But nothing.

Here's my code.

  function popup(){
   mypopup = window.open('http://33bits.es/foro/masiconos.php', 'popup', 'width=400','height=300','status=no', 'scrollbars=yes', 'toolbars=no', 'menubar=no', 'location=no');

}

 $('#mas').click(function(evt) { popup();  });

mypopup.ready(function() {


//Más Iconos
$('img').click(function (evt) {
   var clase =  $(this).attr('class');
   insertar_popup(clase);
});
$('.cerrar').click(function(evt) { window.close(); });


//Mas Iconos CSS
$('.cerrar').css("font-family", "Arial");
$('.cerrar').css("cursor", "pointer");
$('.cerrar').css("margin", "50%");
$('.pop').css("background", "url(http://www.33bits.es/foro/Themes/epic_2_0/images/id/abgg.png)");
$('.iconos_pop > img').css("margin", "5px");
$('.iconos_pop > img').css("cursor", "pointer");
$('.iconos_pop').css("border-radius", "10px");
$('.iconos_pop').css("padding", "10px");
$('.iconos_pop').css("background", "white");
$('.iconos_pop').css("margin", "5% auto");
$('.iconos_pop').css("width", "95%");
});

I want to load the popup and then, load this part of my code, it will give style to the popup. But it doesn't load and my popup doesn't have style, it seems empty and shabby.

Answer 1

A potential solution to your problem could be the use of jQuery Dialogs . It appears the code that you want to load styles the dialog on open, but using jQuery Dialogs allows you to style it with CSS directly. Follow the link below for examples, as well as source code for initializing it.

http://jqueryui.com/dialog

The basic setup uses jQuery notation, you create a in your html page and add a "dialog" class to it:

$(function(){
    $("#yourDialog").dialog();
})

Now to have it open on click of a link, you will need to add some options to the code so that it does not open by default and only when you click on a button that activates it:

Javascript

$(function(){
    $("#yourDialog").dialog({
        autoOpen: false 
    });

    $("#yourButton").click(function(){
       $("#yourDialog").dialog("open");
    });
})

Html

<div id="yourDialog" title="Basic dialog">
    <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>

<button id="yourButton">Button</button>

For a more complete example, visit the link http://jqueryui.com/dialog/#modal-form .

Answer 2

Because you're modifying attribues of DOM elements in your main page, not the popup.

Moreover, mypopup variable isn't set when you attempt to call its ready method. You could try the following:

function popup() {
  var mypopup = window.open('http://33bits.es/foro/masiconos.php', 'popup', 'width=400', 'height=300', 'status=no', 'scrollbars=yes', 'toolbars=no', 'menubar=no', 'location=no');

  mypopup.onload = function() {
      var doc = mypopup.document,
          $popDocument = $(doc);

      // Everything you want
      $popDocument.find('.popClass').click(function() {
        alert('Hey you clicked in the popup!');
      });
  };
}

$('#mas').click(popup);

See it in action: http://plnkr.co/edit/u4YvcFtL1aUiVdmCMVhU?p=preview

Note that you should not manipulate your popup's contents by doing like $('selector') because it will search in you main page. Instead in the example above, do $popDocument.find('selector') .

Here is an answer that wraps the popup in an object in a nice way: Get DOM elements of a popup for jQuery manipulation

Answer 3

That's becaus you can not edit the styling of another webpage that your request in your popup. That would be a security issue if it where possible.

if " http://33bits.es/foro/masiconos.php " is one of your own pages you could edit that and use

document.ready to do the styling