jQuery 弹出内容显示在页面上，但弹出内容未显示答案

【问题标题】：jQuery popup content is showing on the page and popup isn't showing upjQuery 弹出内容显示在页面上，但弹出内容未显示
【发布时间】：2023-04-10 22:34:02
【问题描述】：

我已经尝试过官方的 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 结果相同。我做错了什么？

【问题讨论】：

标签： jquery jquery-mobile popup magnific-popup

【解决方案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）。在 Google 托管的库中，它是：

<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="page" 的 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 脚本中。

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

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

【讨论】：

感谢您的详细回答，我有空时会检查一下，如果可行，会告诉您。