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 e up after clicking on "edit". You have to click Action once again for it to e up.

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 e up after clicking on "edit". You have to click Action once again for it to e up.

• javascript
• jquery
• html
• twitter-bootstrap

• 1 Note your form is not closed, implying invalid HTML. Best fix the HTML first. – iCollect.it Ltd Commented Jan 9, 2015 at 17:01
• its closed in my main code and it dosnt work – Ghostff Commented Jan 9, 2015 at 17:04
• 1 You have a DIV as a child of a UL which is not valid. That caused the main problem. Bart Jedrocha has bypassed those errors in his example below. – iCollect.it Ltd Commented Jan 9, 2015 at 17:04
• oh now i get what you meant. – Ghostff Commented Jan 9, 2015 at 17:06

3 Answers 3

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./bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.1/js/bootstrap.min.js"></script>

    The modal dosnt e up after clicking on "edit". you have to click Action once again for it to e 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 ment: Based on the JSFiddle you provide (as the HTML above is inplete), 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/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/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