bootstrap 下拉菜单中的模态不工作

Question

我尝试向下拉菜单添加模态，但它不会工作，除非我单击它两次或向其添加结束 div。

这是我的 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>

和Fiddle here它可能解释得更好

点击 "edit" 后模态框没有出现。您必须再次单击“操作”才能出现。

Answer 1

我认为这只是一个无效的问题HTML。这是更新后的 JSFiddle 工作行为。

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

Answer 2

您似乎没有关闭列表

添加：

</ul>

在你上次

之后

<li></li>

Answer 3

根据我早期的评论：根据您提供的 JSFiddle（因为上面的 HTML 不完整），更准确的答案是您有一个 div 作为 [= UL 的 48=]。那是无效的。只有 LI 可能是 children of a UL。

此外，您还没有关闭表单元素。

格式化您现有的HTML（使用 JSFiddle 中的 tidyup 按钮）将如下所示： http://jsfiddle.net/TrueBlueAussie/zynxqdxx/6/

解决方案：只需将 div 移出 UL 即可生效 HTML，并且需要添加 </form>。

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

格式化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>

一般建议： 使用格式正确的 HTML 这样您就可以发现这样的错误

bootstrap 下拉菜单中的模态不工作

bootstrap modal not working from dropdown

html

javascript

jquery

twitter-bootstrap