Clicking sub menu pop up a modal in wordpress plugin

1 Views

I am working on a WordPress plugin where I want to open a pop-up modal when I click on one of my plugin sub-menus. I can trigger the modal using a link or a button, but I want to load the modal at the time I click on the submenu.

Code for menu and submenu:

Read More
<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>

Code for my model: 

 <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>

Now i want to pop up the modal when i click on Create New Form submenu. So what i have code in my sfb_create_form_page function?
I tried using various way of using javascript like 

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

this is working for a simple HTML page quite well but not for my plugin. What can do can anyone help?

Post Views: 1

Related posts

2 comments

  1. Here you go. Link

    You need to fire click event on ul li . And open popup when click event is generated.

    $(document).ready(function () {

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

});

  2. I am using like this.

    Go to wp-admin/nav-menus.php page and open the “Show Settings” from top, Check the (XFN) checkbox then write to xfn input some rel value “like a modal” than add your .js file this code

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

Comments are closed.