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可能会更好地解释

单击“编辑”后，模态不会出现。您必须再次单击“操作”才能显示。

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的孩子。那是无效的。只有LI可能是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模式不能从下拉列表中工作

3 个答案: