javascript - 如何加载 Bootstrap 模式只需单击 wordpress 插件子菜单？

Question

如果我在我的插件子菜单页面中添加一个按钮或链接来触发模态，我的模态就可以正常工作。但是我想在单击子菜单时加载我的模式。当我单击子菜单时，它调用一个函数并尝试在这些函数中使用一些 javascript 在页面加载时加载它。我在我的函数头上尝试了以下选项但没有工作

<script type="text/javascript">
  $(window).load(function(){
  $('#myModal').modal('show');
  });
</script>

我试过这个:

$(document).ready(function () {
$('#memberModal').modal('show');
});

谁能帮我找出我的问题。我已经搜索了几乎所有可能的解决方案。但我认为我的问题在于 javascript 没有及时加载，这就是我遇到这个问题的原因。但不知道如何解决这个问题。

如果有人需要，那么我的整个功能代码如下:

<?php
function sfb_create_form_page(){

?>
<script type="text/javascript">
   $(window).load(function(){
     $('#myModal').modal('show');
   });
</script>
<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><h3>Choose Your Form</h3></h4>
  </div>
  <div class="modal-body">
    <a href="#tabs" data-toggle="modal" data-dismiss="modal" id="modal_trigger">Click</a>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>   
  </div>
 </div>
 </div>
 <!--  Modal Tab Content -->
 <div class="modal fade" id="tabs"  tabindex="-1">
 <div class="modal-dialog">
  <div class="modal-content">
  <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title caps"><strong>Design Your Form</strong></h4>
  </div>
  <div class="modal-body">
    <!-- Modal Body Here -->
    <ul class="nav nav-tabs" id="tabContent">
        <li class="active"><a href="#details" data-toggle="tab"><strong>HTML For Form</strong></a></li>
        <li><a href="#access-security" data-toggle="tab"><strong>Edit Form Content</strong></a></li>
        <li><a href="#networking" data-toggle="tab"><strong>Button Style</strong></a></li>
    </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="details">
      <!-- Tab 1 Content Goes Here -->
    </div><!-- Tab 1 Ends Here -->

    <div class="tab-pane" id="access-security">
    <!-- Tab 2 Content Goes Here -->
    </div> <!-- Tab 2 Ends Here -->


    <div class="tab-pane" id="networking">
    <!-- Tab 1 Content Goes Here -->
    </div> <!-- Tab 3 Ends Here -->
  </div><!--  Ends of Tab-->
 </div><!-- End of Body -->
   <div class="modal-footer">  <!-- Fooetr -->          
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="">OK</button>
   </div> <!--End of Fooetr -->  
 </div> <!-- End of modal content -->
 </div><!-- End of modal Dialouge -->
</div><!-- End of Modal Tab -->
<?php
}// End of create page function

Answer 1

JS Fiddle

只需使用:

$(document).ready(function () {
    $('#myModal').modal('show');
});

请记住，首先调用 JQuery，然后调用 Bootstrap.min.js 非常重要