如何加载一个引导模态只需点击一个wordpress插件子菜单

How to load a bootstrap modal just click on a wordpress plugin submenu?

本文关键字:一个 wordpress 菜单 插件 何加载 加载 模态      更新时间:2023-09-26

我的模态工作很好,如果我在我的插件子菜单页面添加一个按钮或链接来触发模态。但我想加载我的模态点击子菜单。当我点击子菜单时,它调用一个函数,并尝试在这些函数中使用一些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

JS Fiddle

只需使用:

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

记住,首先调用JQuery,然后调用Bootstrap.min.js