Question

我已经尝试过官方的jQuery Mobile弹出窗口，现在还尝试了Magnific Popup插件，所有这些都显示了我页面上弹出窗口的内容，而不是隐藏它并在稍后显示模态。

的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也是如此。我做错了什么？

Answer 1

@Riccardo看起来有一些事情需要在这里解决。

首先，您还没有包含jQuery Mobile脚本。如果您要链接到Google托管库，则需要包含：

<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页面结构规定，上面的链接等内容嵌套在一个带有role="main" class="ui-content"的div中，如果它嵌套在一个带有`data-role =＆＃34; page＆＃34;的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>

最后，弹出窗口本身需要data-role="popup"标记中包含div属性：

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

与上面的链接类似，弹出窗口div需要嵌套在页面div中，但与链接（普通内容）不同，弹出窗口会被特别处理为＆＃39;不是你想要通常看到的内容;只有当它被调用时，它才会位于＆＃34;内容＆＃34; 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脚本中。

再次查看弹出窗口here的jQuery Mobile演示页面，了解更多弹出样式选项。

Here's a JSFiddle with this example all working.祝你的项目好运！

jQuery弹出内容显示在页面上，弹出窗口没有显示出来

1 个答案: