打开弹出窗口时加载代码

Question

我在加载弹出窗口时需要加载一些代码 JS。我试过了：

mypopup.ready(function...

但什么都没有。

这是我的代码。

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

我想加载弹出窗口，然后加载我的这部分代码，它将为弹出窗口赋予样式。但它没有加载，而且我的弹出窗口没有样式，看起来很空洞而且破旧。

Answer 1

您的问题的一个潜在解决方案可能是使用 jQuery 对话框。看起来您想要在打开的对话框中加载样式的代码，但是使用 jQuery Dialogs 允许您直接使用 CSS 对其进行样式设置。按照下面的链接获取示例，以及初始化它的源代码。

http://jqueryui.com/dialog

基本设置使用 jQuery 表示法，您在 html 页面中创建一个并添加一个“对话框”类：

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

现在要在单击链接时打开它，您需要在代码中添加一些选项，使其默认不会打开，并且仅在您单击激活它的按钮时才打开：

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>

如需更完整的示例，请访问链接http://jqueryui.com/dialog/#modal-form。

Answer 2

因为您正在修改主页面中的 DOM 元素的属性，而不是弹出窗口。

此外，当您尝试调用其ready 方法时，未设置mypopup 变量。您可以尝试以下方法：

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

查看实际操作：http://plnkr.co/edit/u4YvcFtL1aUiVdmCMVhU?p=preview

请注意，您不应通过 $('selector') 之类的操作来操纵弹出窗口的内容，因为它会在您的主页中搜索。而不是在上面的示例中，执行$popDocument.find('selector')。

这是一个以很好的方式将弹出窗口包装在对象中的答案：Get DOM elements of a popup for jQuery manipulation

Answer 3

这是因为您无法编辑您在弹出窗口中请求的另一个网页的样式。如果可能的话，这将是一个安全问题。

如果“http://33bits.es/foro/masiconos.php”是您自己的页面之一，您可以对其进行编辑并使用

document.ready 准备做样式