Bootstrap modal not working on dropdown menu
Bootstrap 3.3 doesn't work with link setting in dropdown menu.
<ul class="dropdown-menu" role="menu">
<li><a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>
If I remove this line from the js modal works fine, but the dropdown crashes after clicking. The dropdown menu should be open.
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
+3
source to share
2 answers
This is what you have to do to make the modal show in the dropdown:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
if ($(e.target).is('[data-toggle=modal]')) {
$($(e.target).data('target')).modal()
}
});
Demo: http://jsfiddle.net/wkc5md23/8/
+6
source to share
Remove the jQuery function $('.dropdown-menu').click
and make sure the dropdown is shown like this:
Html
<ul class="list">
<li class="item">
<a href="">I am a item</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>
</li>
</ul>
</li>
</ul>
CSS
.list li ul {
display: none;
}
Solution 1: Pure CSS, show the dropdown menu:
.list li:hover ul {
display: block
}
Solution 2: Just jQuery, bring up the dropdown on a button click:
Use the CSS class to display the dropdown:
.open { display: block }
And do it with jQuery:
$('.list li a').click(function(){
$(this).next().toggleClass('open');
});
+1
source to share