Question

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

我试图通过

来阻止这种行为

$('.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

您正在使用针对导航条的下拉菜单，这会导致操作在点击时发生，因为它旨在将人员发送到网址。相反，使用标准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>

我假设您希望将所选操作用于某些内容，因此您希望在用户选择该操作后将该操作显示给用户以保持显而易见。此外，使用实际下拉菜单意味着您可以在用户点击提交按钮时轻松拉出所选值。你的按钮也是一个程式化的锚标签，所以它不会像标准按钮那样工作，但我不知道你的整个用例。只是指出它来覆盖我的所有基地。

Answer 2

您正在使用href中没有值的链接。添加＆＃39;＃＆＃39;或任何其他价值。

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

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

2 个答案: