Question

我有一个JavaScript函数，希望在使用bootstrap的模态弹出窗口时调用它。但是，根本不调用该函数。任何人都可以帮我这个吗？

这是我的JavaScript代码：

<script type="text/javascript">
      /*---------------------------------------------About Us-----------------------------------------------*/
      function aboutUs(AU) {
          $("#modal-content").window({
                  icon: ('/SAFETY_AT_SG/Images/PopUpWindowImg/Analysis.png'),
                  title: "About Us",
                  content: "<div>" +
            "<h3>Our Vision and Mission</h3>" +
            "<img src='..Images/Logo.jpg' />" +
            "<h5>Our Vision</h5>" +
            "<p>Create safety awareness among Teenagers to Adults</p>" +
            "<h5>Our Mission</h5>" +
            "<p>- Develop an Online Map Portal/Mobile Platform which serve as a purpose for adults to <br/>identify the safety issue around a area.</p>" +
            "<p>- Provide kids/teenagers the safer/shortest route to travel back home avoiding any <br/>unncessary trouble." +
            "</div>",

              });
      }
</script>

这是我调用函数的地方。

<div class="modal fade" id="About" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>About Us</h4>
            </div>
            <div class="modal-body">
                <script type="text/javascript">
                    aboutUs(this);
                </script>
            </div>
        </div>
    </div>
</div>

任何人都可以更正我的代码吗？

Answer 1

用$( document ).ready()包裹你的脚本或将其移到代码的底部！

Answer 2

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。只有在页面文档对象模型（DOM）准备好执行JavaScript代码时， $（document）.ready（）中包含的代码才会运行。

所以你的代码会改为：

<div class="modal fade" id="About" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>About Us</h4>
            </div>
            <div class="modal-body">
                <script type="text/javascript">
                    $(document).ready(function () {
                        aboutUs(this);
                    });
                </script>
            </div>
        </div>
    </div>
</div>

在分区上调用JavaScript函数（引导模式弹出窗口）

2 个答案: