引导模态禁用href

Question

I'm currently facing an issue with a Bootstrap Modal... On my web site I have a navbar with many links but the last link doesn't work (if I have a lot of links I can face the issue on several items) I'm not able to click when I have the modal window. If I click on modal link, javascript displays the window then I m able to click on all links

You will find below the code: ( IA doesn't work => then I click on user-icon => then i'm able to click on IA)

 <div class='navbar-inner'>
<div class='container'>
    <ul class='nav'>
        <li> <a class='brand' href='myurl'>Home</a> </li>
        <li class='divider-vertical'></li>
        <li> <a href='myurl'>BKB</a></li>
        <li> <a href='myurl'>Pole</a></li>
        <li> <a href='myurl'>IA</a></li>
    </ul>
    <ul class='nav pull-right'>
        <li data-toggle='modal' data-target='#contactModal'><img class=' navbar-search' src='./img/user-icon.png'></li>
        <li><img class=' navbar-search' src='./img/button-round-question-icon.png'></li>
    </ul>
</div>

The modal :

<div class='modal fade' id='contactModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' 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'>title</h4>
        </div>
        <div class='modal-body'>
                <div class='row'>
                    <div class='span4' id='modalperson'>
                        <div><span class='modaldataleft'>xx</span><span class='modaldataright'>  xx</span></div>
                        <div><span class='modaldataleft'>xxx </span><span class='modaldataright'>  xx</span></div>
                        <div><span class='modaldataleft'>xxx x</span><span class='modaldataright'>  xx</span></div>
                        <div><span class='modaldataleft'>xxx </span><span class='modaldataright'>  xx</span></div>
                        <div><span class='modaldataleft'>xxx </span><span class='modaldataright'>  xx</span></div>
                    </div>
                    <div class='span2 blank white' id='modalicon'>
                        <img style='float:right;' src='./img/user-icon_96x96.png'>
                    </div>
                </div>
                <div class='row'>
                    <div class='span6' id='modaladresse'>
                        <div class='textleft'>something</div>
                        <div class='textleft'>something</div>
                    </div>
                </div>
                <div class='row'>
                    <div class='span6' id='modaladresse'>
                        <div class='textleft'>something</div>
                    </div>
                </div>
        </div>
        <div class='modal-footer'>
            <button type='button' class='btn btn-default' data-dismiss='modal'>Fermer</button>
        </div>
    </div>
 </div>

Do you see what am i doing wrong?

Thanks in advance.

Answer 1

You need the following, with the toggle mark-up:

<li data-toggle='modal' data-target='#contactModal'><img class=' navbar-search' src='./img/button-round-question-icon.png'/></li>

I'm guessing your target id would be different too but without seeing the rest of your mark-up I can't tell.

Ps your image tags aren't closed too.