CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
mbigun
mbigun

Reputation: 1302

Bootstrap: How to change menu item color due modal window closing

I'm using twitter bootstrap and trying to open modal pop-up by clicking on menu item. Here is my code:

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <ul class="nav pull-right">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
                <ul class="dropdown-menu">
                    <li class="active"><a href="">Some item 1</a></li>
                    <li class=""><a href="">Some item 2</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#myModal" class="dropdown-toggle" data-toggle="modal">
                Contacts</a></li>
        </ul>
    </div>
    <!-- /.navbar-inner -->
</div>

And my Modal window:

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Modal header</h3>
    </div>
    <div class="modal-body">
        <p>
            One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
        <button class="btn btn-primary">
            Save changes</button>
    </div>
</div>

First menu item has dropdown data-toggle. Second menu item has modal data-toggle. When I'm clicking on first item, it look's like clicked and change own color. When I'm clicking on he second(Contacts) menu item the item color leaves the same. I'm added onclick event for "Contacts" li element:

onclick="$(this).addClass('modal-open-li');"

where I'm writing my own modal-open-li class to make this element clicked. But how can I return the color of li element when I'm closing my modal pop-up window? Also, can I add multiple data-toggle for the same li element like data-toggle="modal dropdown"?

Upvotes: 1

Views: 1126

Answers (1)

omma2289
omma2289

Reputation: 54629

If I understand correctly you want to remove the class to your link when the modal is closed, for that you can bind to the model 'hide' event, try adding this JavaScript code:

$('#myModal').on('hide',function(){
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});

And about adding multiple data-toggles for an element, I don't know if it's possible but I would advise against it because do you really need to toggle a dropdown and open a modal at the same time? I think there would be a better way to improve UX

Upvotes: 1

Related Questions