打开弹出窗口时加载代码

加载弹出窗口时，我需要加载一些代码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%");
});

我想加载弹出窗口，

然后加载我的代码的这一部分，它将为弹出窗口提供样式。但是它没有加载，我的弹出窗口没有风格，它看起来空洞而破旧。

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

http://jqueryui.com/dialog

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

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

现在，要在单击链接时打开它，

您需要在代码中添加一些选项，以便默认情况下它不会打开，并且仅在单击激活它的按钮时打开：

爪哇语

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

<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。

因为您正在修改主页中 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') 。

这是一个答案，它以一种很好的方式将弹出窗口包装在一个对象中：获取弹出窗口的 DOM 元素以进行 jQuery 操作

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

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

相关内容

最新更新

热门标签：