javascript - 单击子菜单会弹出 WordPress 插件中的模式

标签 javascript jquery wordpress twitter-bootstrap bootstrap-modal

我正在开发一个 Wordpress 插件,当我单击我的插件子菜单之一时,我想打开一个弹出模式。我可以使用链接或按钮触发模式,但我想在单击子菜单时加载模式。

菜单和子菜单代码:

<div class="wp-menu-name">Smart Form Builder</div>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head">Smart Form Builder</li>
<li class="wp-first-item">
<a class="wp-first-item" href="admin.php?page=smart-form-builder">Create New Form</a>
</li>
<li>
<a href="admin.php?page=smart-form-builder-form-list">Form List</a>
</li>
<li>
<a href="admin.php?page=smart-form-builder-support">Support</a>
</li>
</ul>
</div>

我的模型的代码:

 <div class="modal fade" id="modal_choose_ur_form" tabindex="-1" role="dialog" aria-labelledby="modal_choose_ur_formLabel">
    <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>

现在我想在单击创建新表单子菜单时弹出模式。那么我的 sfb_create_form_page 函数中有什么代码? 我尝试使用各种使用 javascript 的方式,例如

<script type="text/javascript">
  $(document).ready(function () {
     $('#modal_choose_ur_form').modal('show');
  });
</script>

这对于简单的 HTML 页面来说工作得很好,但对于我的插件却不起作用。任何人都可以帮忙做什么?

最佳答案

给你。 <强> Link

您需要在 ul li 上触发点击事件。并在生成点击事件时打开弹出窗口。

$(document).ready(function () {

    $(".ulLiOuter ul li").click(function(e){
        e.preventDefault();
        $('#modal_choose_ur_form').modal('show');
    });

});

关于javascript - 单击子菜单会弹出 WordPress 插件中的模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30372661/

相关文章:

php - fatal error : Allowed memory size of 67108864 bytes exhausted (tried to allocate 122880 bytes)

javascript - JavaScript 待机功能存储在 RAM 中还是硬盘中?

javascript - 无法映射 Firebase 数据库项目

jquery - 当另一个 div 在窗口中可见时隐藏元素

javascript - 如何从 JavaScript 函数返回 promise ?

css - 删除 Ubermenu 元素上的悬停背景样式

wordpress - SEO 单页 wordpress

javascript - 使用 API 时出错

javascript - 是否可以使用 JavaScript 或某些插件全局获取任何焦点编辑器的编辑光标位置?

javascript - 当窗口大小调整时,按钮应该以不同的方式工作