html - Open an Modal window from Navigation bar

Question

I'm trying to open a modal window from navigation bar. I've followed some good tutorials and once I pressed my link a modal opened, problem is model window looks like not editable for some reason, can't even close the X in the modal window. The same works great outside the nav bar.

I would like to know why this happens.

My code is as follows:

<ul class="nav navbar-nav pull-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#" data-toggle="modal" data-target="#basicModal">Contact Us</a></li>
</ul>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

Screenshot:

Answer 1

This is covered in the official documentation:

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Put the <div> that has the modal class outside of the navbar. You can leave the modal-triggering <a> in the navbar.