jQuery彈出內容顯示在頁面上，彈出窗口不顯示

我試過官方的jQuery Mobile彈出窗口，現在也嘗試Magnific Popup插件和're都顯示在我的網頁上的彈出窗口的內容而不是隱藏它並稍後在模式中顯示它。jQuery彈出內容顯示在頁面上，彈出窗口不顯示

的index.php：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" type="text/css" href="magnific.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="magnific.js"></script> 

    <script src="moment.js"></script> 
    <script src="livestamp.min.js"></script> 
    <script src="main.js"></script> 


</head> 

<body> 

<div class="wrapper"> 

    <!-- Like so: --> 
<a href="#test-popup" class="open-popup-link">Show inline popup</a> 

<!-- Or like so: --> 
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a> 

<!-- Popup itself --> 
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>

main.js：

$(document).ready(function() { 
    $('.open-popup-link').magnificPopup({ 
    type:'inline', 
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href. 
}); 
});

出於某種奇怪的原因，彈出窗口沒有顯示出來，而是我看到它在index.php內容。 jQuery-Mobile Popup的結果相同。我究竟做錯了什麼？

來源

2016-09-22 Ricardo

@Riccardo它看起來像有幾件事情需要在這裏修復。

首先，你還沒有包含jQuery Mobile腳本。如果你鏈接到谷歌託管庫，那麼你需要包括：

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

而且，現在你包括jQuery Mobile的，它支持jQuery Mobile的（目前）是jQuery的核心的最新版本2.1，（你目前鏈接到3.1）。在谷歌託管庫是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

您還再需要到jQuery Mobile的CSS頁面：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

現在，你有你的庫中的所有加載，我們可以得到的鏈接，打開彈出窗口。繼jQuery Mobile演示here後，您需要將data-rel="popup"添加到打開彈出窗口的鏈接中。這使得你的鏈接：

<a href="#test-popup" data-rel="popup">Show inline popup</a>

此外，jQuery Mobile的頁面結構決定了內容，比如上面可以嵌套一個div內的role="main" class="ui-content"本身如果嵌套一個div內的`數據角色=「頁面」的鏈接：

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
</div>

最後彈出本身需要具有包括在div標籤的data-role="popup"屬性：

<div id="test-popup" data-role="popup">Popup content</div>

與上面的鏈接類似，彈出框div需要嵌套在頁面div中，但與鏈接（這是普通內容）不同，彈出窗口被特別對待，因爲它不是您想要正常看到的內容;只有當它被調用，所以它位於「內容」外div如下：

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
    <!-- Popup itself --> 
    <div id="test-popup" data-role="popup">Popup content</div> 
</div>

所以把他們放在一起，你應該在你的index.php：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 

</head> 

<body> 

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
    <!-- Popup itself --> 
    <div id="test-popup" data-role="popup">Popup content</div> 
</div> 

</body>

您還可以得到擺脫你寫的任何自定義JavaScript來顯示這個彈出窗口，因爲它全部在jQuery和jQuery Mobile腳本中。

再次查看jQuery Mobile演示頁面的彈出窗口here以獲取更多彈出式樣式選項。

Here's a JSFiddle with this example all working.祝您的項目順利！

來源

2016-10-05 10:27:22 Brad

謝謝你的詳細答案，我會在我有空閒時候檢查它，並會告訴你是否有用。 – Ricardo

jQuery彈出內容顯示在頁面上，彈出窗口不顯示

回答

相關問題