Question

我正在开发一个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>

现在我想在点击Create New Form子菜单时弹出模态。那么我的sfb_create_form_page函数中的代码是什么？我尝试使用各种方式使用javascript，如

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

这适用于简单的HTML页面，但不适用于我的插件。什么可以做任何人可以帮助？

Answer 1

你走了。的 Link

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

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

Answer 2

我这样使用。

转到wp-admin / nav-menus.php页面并从顶部打开“显示设置”，选中（XFN）复选框，然后写入xfn输入一些rel值“就像模态”而不是添加你的.js文件这段代码

$('a[rel="modal"]').click(function () {
 $("#modal-id").modal(); 
});

单击子菜单会在wordpress插件中弹出一个模态

2 个答案: