Question

好的，我正在尝试使用这个模态插件：http://joaopereirawd.github.io/animatedModal.js/

但是我想让它出现在页面的外观而不是点击它。

所以，我改变了这个代码的页面方向：

<script type="text/javascript">
    $(document).ready(function() {
            $("#demo01").animatedModal();
        });
</script>

或

<script type="text/javascript">
    $(window).load(function() {
            $("#demo01").animatedModal();
        });
</script>

但两者都不起作用。我在这里错过了什么？我如何让它工作？

这是完整的html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Animated Modal</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="animatedModal.min.js"></script>
<script type="text/javascript">
    $(window).load(function() {
            $("#demo01").animatedModal();
        });
</script>
<style type="text/css">

</style>
</head>

<body>
    <!--Call your modal-->
    <div id="demo01" href="#animatedModal">

    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="close-animatedModal"> 
            <img src="images.jpg">
        </div>

        <div class="modal-content">
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae pulvinar velit. Proin consequat luctus diam, ac posuere sapien. Vivamus purus odio, suscipit vitae libero ut, sollicitudin euismod sem. Sed eu efficitur diam. Nunc purus lacus, faucibus commodo convallis eget, congue at quam. Sed auctor mattis dui, id consectetur augue blandit nec. Proin sit amet libero a dolor cursus placerat. In quis porta augue. Etiam sagittis sit amet lorem a laoreet.</p>

        </div>
    </div>

  </div>

</body>
</html>

Answer 1

根据info on animatedModal.js page，animatedModal()不用于显示模态，而仅用于初始化模态。看起来这个库还没有任何以编程方式显示模态的方法，因此您需要在特定的click上触发div事件。不过，我假设您不希望任何div可见，因此您需要display: hidden它。有点丑陋的解决方案，但它可能会有效。

以下摘自Opening modal on page load：

$("#demo01").animatedModal(); //initialize animatedModal
$("#demo01").click(); //triggers opening of Modal.

有一个拉取请求来添加此功能，但它还没有发布版本： https://github.com/joaopereirawd/animatedModal.js/pull/15

如何在document.ready上加载这个特定的animatedModal.js？

1 个答案: