CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menumodal-dialog
Kasara
Kasara

Reputation: 275

bootstrap modal not working in dropdown menu

Bootstrap 3.3 not working moodal link in dropdown menu.

JSFiddle

<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 js modal works perfect, but dropdown menu collapses after click. Dropdown menu must be opened.

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

Upvotes: 5

Views: 10750

Answers (4)

Environment Evolution
Environment Evolution

Reputation: 1

Put Modal after Dropdown-menu

<!-- Modal -->
<div class="modal fade" id="NewGroup" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="NewGroupLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Kishan Doshi
Kishan Doshi

Reputation: 1

I tried by adding a Button element instead of DropdownItem inside of DropdownMenu and it worked for me. I used reactstrap (and hence elements starting with caps) but it should probably have similar behavior to bootstrap or react-bootstrap. This did not close the dropdown menu.

Upvotes: 0

poashoas
poashoas

Reputation: 1894

Remove the jQuery function $('.dropdown-menu').click and make sure the dropdown menu 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. Purely CSS, show dropdown on hover:

.list li:hover ul {
    display: block
}

Solution 2. Just jQuery, show dropdown by click:

Use a CSS class to show the dropdown:

.open { display: block }

And do this with jQuery:

$('.list li a').click(function(){
    $(this).next().toggleClass('open');
});

Upvotes: 1

dfsq
dfsq

Reputation: 193261

This is what you should do to make modal show in dropwdown:

$('.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/

Upvotes: 9

Related Questions