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弹出内容显示在页面上，弹出窗口不显示

回答

相关问题