当用户从下拉菜单中选择项目时如何防止 bootstrap 模式关闭

Question

在下面的示例中，当用户单击下拉列表中的任何项目时，模式 window 会自动触发关闭。当用户单击“发送”按钮时，模态 window 应关闭。需要类别和消息才能激活“发送”按钮（但这不在主题范围内）。

我试图通过

来阻止这种行为

$('.dropdown-menu').click(function(event){
    event.stopPropagation();
});

，但它并没有改变任何东西。

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form role="form">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="dropdown">
                                <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select category<span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a href="">Category 1</a></li>
                                    <li><a href="">Category 2</a></li>
                                    <li><a href="">Category 3</a></li>
                                    <li><a href="">Category 4</a></li>
                                    <li><a href="">Category 5</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="message-text" class="control-label">MESSAGE</label>
                                <textarea class="form-control" id="message-text"></textarea>
                            </div>
                        </div>
                    </div>
                </form>                     
                <div class="row">
                    <div class="col-xs-2">
                        <p><a class="btn btn-primary" href="#" role="button">SEND</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您使用的是用于导航栏的下拉菜单，它会在单击时立即执行操作，因为它旨在将人们发送到 URL。相反，使用标准的 HTML 下拉菜单并将其设置为按钮样式。

BOOTPLY

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form role="form">
                    <div class="row">
                        <div class="col-xs-12">
                            <select class="btn btn-default">
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                              <option value="4">Option 4</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="message-text" class="control-label">MESSAGE</label>
                                <textarea class="form-control" id="message-text"></textarea>
                            </div>
                        </div>
                    </div>
                </form>                     
                <div class="row">
                    <div class="col-xs-2">
                        <p><a class="btn btn-primary" href="#" role="button">SEND</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我假设您希望将 selected 操作用于某些事情，因此您会希望在用户 select 保留内容后向用户显示该操作明显的。此外，使用实际的下拉列表意味着您可以在用户点击提交按钮时轻松拉出 selected 值。您的按钮也是一个程式化的锚标记，因此它不会像标准按钮那样工作，但我不知道您的整个用例。只是指出它来涵盖我的所有基础。

Answer 2

您正在使用 href 中没有值的链接。添加“#”或任何其他值。

<ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>

当用户从下拉菜单中选择项目时如何防止 bootstrap 模式关闭

How to prevent a bootstrap modal from closing when user selects item from dropdown-menu

html

javascript

jquery

twitter-bootstrap

bootstrap-modal