打開彈出窗口時加載代碼

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頁面中創建一個，並向其中添加“對話框”類：

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

現在要在單擊鏈接時打開它，您將需要在代碼中添加一些選項，以使其默認情況下不會打開，只有在單擊激活它的按鈕時才打開：

Java腳本

$(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') 。

這是一個很好的將彈出窗口包裝在對象中的答案： 獲取jQuery操作彈出窗口的DOM元素

Answer 3

那是因為您無法在彈出窗口中編輯您所請求的另一個網頁的樣式。 如果可能的話，那將是一個安全問題。

如果“ http://33bits.es/foro/masiconos.php ”是您自己的頁面之一，則可以對其進行編輯和使用

document.ready做樣式