如何让这个特定的animatedModal.js加载到document.ready

how to have this spcific animatedModal.js load up on document.ready?

本文关键字：js animatedModal 加载 ready document      更新时间：2023-09-26

好的，所以，我试图使用这个模态插件: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>

根据animatedModal.js页面上的信息，animatedModal()不是用于显示模态，而只是用于初始化它。似乎这个库没有任何方法来显示模式编程，所以你需要触发特定的div上的click事件。然而，我假设你不希望任何div可见，所以你需要display: hidden它。一个有点难看的解决方案，但它可能会工作。

下面是页面加载时打开模式的节选:

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

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

相关文章：