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 Dialogs 。看来您要加载的代码在打开时对对话框进行样式设置，但使用jQuery Dialogs可以直接使用CSS对其进行样式设置。请点击以下链接获取示例，以及初始化它的源代码。

http://jqueryui.com/dialog

基本设置使用jQuery表示法，您在html页面中创建一个＆＃34;对话框＆＃34;上课：

$(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元素的属性，而不是弹出窗口。

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

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

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

如果＆＃34; http://33bits.es/foro/masiconos.php＆＃34;是您可以编辑并使用

的页面之一

document.ready做样式

打开弹出窗口时加载代码

3 个答案: