Twitterbootstrap dropdown, open modal

drop-down-menu, modal-dialog, twitter-bootstrap

Solution

You need to have a wrapper div `.dropdown` for the `button` and `<ul>` for the dropdown to work and for the modal you need to give the attribute `data-toggle="modal"` to the link

<div class="dropdown">
    <button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span>    
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#consumergoods" data-toggle="modal">Consumer goods</a></li>
    </ul>
</div>
<div class="modal fade" id="consumergoods" data-target="#consumergoods">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header orange">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>    
                </button>
                 <h4 class="modal-title"><strong></strong>Consumer goods</h4>    
            </div>
        </div>
    </div>
</div>

Fiddle

Problem

Trying to get a dropdown button to open, and then when clicking on an item in the dropdown it should open a modal - but not working, added this code: ``` <button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#consumergoods">Consumer goods</a></li> <div class="modal fade" id="consumergoods" data-target="#consumergoods"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header orange"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title"><strong></strong>Consumer goods</h4> </div> ``` Probably doing something seriously wrong, but I'd be glad if someone could help, thanks!

Original source