问题描述:

I tried to add a modal to dropdown menu but it won't work unless I click it twice or add a closing div to it.

This is my HTML:

<div class="bs-example">

<form>

<!--Default buttons with dropdown menu-->

<div class="btn-group">

<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>

<ul class="dropdown-menu">

<li><a href="#myModal" data-toggle="modal">edit</a></li> <!-- i dont want to add a div here -->

<div id="myModal" class="modal fade">

<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">Confirmation</h4>

</div>

<div class="modal-body">

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</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>

And Fiddle here it might explain better

The modal doesn't come up after clicking on "edit". You have to click Action once again for it to come up.

网友答案:

I think it's just a matter of invalid HTML. Here is an updated JSFiddle with working behaviour.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    The modal dosnt come up after clicking on "edit". you have to click Action once again for it to come up
<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a  href="#myModal" data-toggle="modal">edit</a></li>
            </ul>
        </div>
    </form>
</div>

<div id="myModal" class="modal fade">
<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">Confirmation</h4>
    </div>
    <div class="modal-body">
        <p>Do you want to save changes you made to document before closing?</p>
        <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
    </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>
网友答案:

It looks like you didn't close your list

Add:

</ul> 

After your last

<li></li>
网友答案:

Following on from my early comment: Based on the JSFiddle you provide (as the HTML above is incomplete), a more accurate answer would be that you had a div as a child of the UL. That is not valid. Only LIs may be children of a UL.

Also you had not closed your form element.

Formatting your existing HTML (using the tidyup button in JSFiddle) would look like this: http://jsfiddle.net/TrueBlueAussie/zynxqdxx/6/

Solution: That div simply needed to be moved outside the UL to be valid HTML and the </form> needed to be added.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/zynxqdxx/5/

Formatted Html:

<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>

            </button>
            <ul class="dropdown-menu">
                <li><a href="#myModal" data-toggle="modal">edit</a>

                </li>
            </ul>
            <!-- i dont want to add a div here -->
            <div id="myModal" class="modal fade">
                <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">Confirmation</h4>

                        </div>
                        <div class="modal-body">
                            <p>Do you want to save changes you made to document before closing?</p>
                            <p class="text-warning"><small>If you don't save, your changes will be lost.</small>

                            </p>
                        </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>
        </div>
    </form>
</div>

General advice: work with well formatted HTML so you can spot errors like this

相关阅读:
Top