jquery - 弹窗不显示

Question

我正在使用jquery 弹出覆盖插件（我选择它是因为它具有响应性）。我的页面上有很多链接，当我点击它们时，它会显示一个包含不同内容的弹出窗口..

这是我的代码：

<div class="more">
    <a class="my_modal_open_1" href="#"></a>
</div>
<div id="my_modal_1">
    <div class="image-odd">
        <img src="images/post/1_guerlain.png" width="421" height="590" />
    </div>
    <a href="#" class="my_modal-close">Close</button>
</div>
<script type="text/javascript">
    $(".my_modal_open_1").click(function() {
        $("#my_modal_1").popup();
    });
</script>

但是当我这样做时，它并没有向我显示任何东西......

你对此有什么想法吗？

谢谢 ：）

Answer 1

根据我对这个插件的理解，该.popup()方法不会使内容出现，而是在页面加载时将其作为弹出窗口启用。

这是一个小提琴，向您展示我的意思。

Answer 2

在读取任何 jQuery 之前，您需要输入$(document).ready(function)({ //all jQuery codes goes here }); 您的情况应该是：

    <script>
      $(document).ready(function)({
        //then goes what you wanted to do
        $(".my_modal_open_1").click(function() {
           $("#my_modal_1").popup();
        });
      });
    </script>

Answer 3

我会首先尝试 Sashka 的建议。如果这不起作用，请尝试在 onclick 函数中放置一个警报，以查看它是否被执行。

你也可以试试：

<script>
    $(function() {
      $("#my_modal_1").popup();
    });
</script>

查看弹出功能是否有效。