2013-03-29 101 views
3

我對jquery和其他所有方面都非常不滿意。我只做了一頁特設,所以我迷路了。我需要顯示iframe並彈出。怎麼做?bpopup無法正常工作+在頁面加載時顯示

我試圖bpopup:

index.html的是這樣的:

<button id="my-button">POP IT UP</button> 
<!-- Element to pop up --> 
<div id="element_to_pop_up"> 
    <a class="b-close">x<a/> 
    Content of popup 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery.bpopup.min.js"></script> 
<script src="js/jquery.easing.1.3.js"></script> 
<script src="js/scripting.min.js"></script> 

而且根據bpopup的主頁我改性jquery.bpopup.min.js

// Semicolon (;) to ensure closing of earlier scripting 
// Encapsulation 
// $ is assigned to jQuery 
;(function($) { 

    // DOM Ready 
    $(function() { 

     // Binding a click event 
     // From jQuery v.1.7.0 use .on() instead of .bind() 
     $('#my-button').bind('click', function(e) { 

      // Prevents the default action to be triggered. 
      e.preventDefault(); 

      // Triggering bPopup when click event is fired 
      $('element_to_pop_up').bPopup({ 
     content:'iframe', //'ajax', 'iframe' or 'image' 
     contentContainer:'.content', 
     loadUrl:'http://dinbror.dk/search' //Uses jQuery.load() 
    }); 


     }); 

    }); 

})(jQuery); 

和我用默認的CSS設置如下:

#element_to_pop_up { 
    background-color:#fff; 
    border-radius:15px; 
    color:#000; 
    display:none; 
    padding:20px; 
    min-width:400px; 
    min-height: 180px; 
} 
.b-close{ 
    cursor:pointer; 
    position:absolute; 
    right:10px; 
    top:5px; 
} 

現在奇怪的事情。有一個默認的js設置,如$('#element_to_pop_up').bPopup();實際上工作,單擊按鈕後顯示簡單的彈出窗口。但是當我使用Iframe設置(如上)時,沒有任何事情發生。沒有。 Whyyyy?我很困惑。

目標是在頁面加載時顯示彈出窗口。我看到了幾個提示,但沒有一個可行。要修改哪個文件以及如何?

如果您知道如何提供幫助,請告訴我。只是不要忘記我就像一個學習走路的小孩。所以不要跳過任何細節,比如「綁鞋帶」。非常感謝。

回答

-1

有幾件事要檢查。首先,打開Chrome開發工具並觀看控制檯。點擊按鈕查看是否有任何錯誤。

其次,檢查網絡選項卡,並確保一切正確加載。

你可以發佈實際工作的代碼,以便我們可以看到有什麼不同嗎?

0
<div id="element_to_pop_up"> 
<a class="b-close">x<a/> 

<div class="content"> 
    Content of popup 
</div> 

</div> 

只需添加一個額外的div與類「內容」。它應該工作。

5

好的。我知道這個答案。問題是因爲您從他們的網站複製並粘貼了您的代碼,並且存在錯誤。

的元素標識符仔細一看這條線:

$('element_to_pop_up').bPopup({..... 

他們沒有在element_to_pop_up之前把#。它應該是

$('#element_to_pop_up').bPopup({..... 

後,你的代碼應工作

0

嘗試增加「jQuery的1.10.2.js」庫到你的頁面或它的最新版本。