如何加载一个引导模态只需点击一个wordpress插件子菜单
How to load a bootstrap modal just click on a wordpress plugin submenu?
我的模态工作很好,如果我在我的插件子菜单页面添加一个按钮或链接来触发模态。但我想加载我的模态点击子菜单。当我点击子菜单时,它调用一个函数,并尝试在这些函数中使用一些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">×</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">×</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
相关文章:
- Wordpress在播放器旁边播放一个自定义的下载按钮,而不是下载
- 我想每隔10秒刷新一个wordpress网站
- 如何使一个简单的HTML文件成为wordpress中可用的页面
- Wordpress-我应该将脚本分为特定的页面还是有一个主js文件
- Wordpress创建一个自定义休息服务
- 有没有一个Wordpress插件可以让我展示HTML/JS/CSS的例子
- 有没有一个wordpress插件来制作这样的幻灯片
- 需要建议为wordpress博客作者创建一个随机名称
- 在WordPress中添加一个Highchart
- Wordpress jQuery 脚本不会在具有 jQuery.noConflict 用法的一个实例上启动
- 在一个js文件中为不同的wordpress页面添加多个自定义脚本
- 创建一个像 WordPress 一样读取模式的正则表达式
- Wordpress 当我包含一个特殊的字符串时不会解析 JSON
- 这个JavaScript能在一个WordPress页面中处理多个显示/隐藏吗
- 限制访问一个页面在一个Wordpress网站只为特定的参考
- 无论如何,我可以在一个Wordpress页面创建一个RSS提要
- 试图嵌入一个自定义javascript谷歌地图到一个wordpress网站
- 我的第一个WordPress插件-Can'无法运行脚本
- 一个Wordpress插件可以转换为使用在非WP网站
- 如何加载一个引导模态只需点击一个wordpress插件子菜单