data-target="#my-modal" 是否应该放在 Twitter Bootstrap 中的模态 div 中？

Question

我知道将 data-target="#my-modal" 放在模式 div 之外的启动按钮中是必要的。但是我是否也应该将该代码放在模态 div 内的关闭按钮中？或者机器总是知道它应该关闭模态 div 它的确切位置？

<button class="btn btn-success" data-toggle="modal" data-target="#my-modal">Launch Modal</button>

    <div class="modal" id="my-modal"> <!-- this is modal div -->
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">x</button> <!-- put `data-target="#my-modal"` in? -->
                    <h4 class="modal-title">Hello User!</h4>
                </div>
                <div class="modal-body">
                    Welcome our dear user of our website!
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Dismiss</button> <!-- put `data-target="#my-modal"` in? -->
                    <button class="btn btn-success">Save Changes</button>
                </div>
            </div>
        </div>

附加信息：这是它的外观。

Answer 1

只需 data-dismiss="modal" 就足够了：

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

但是，不支持使用多重模态here。如果您想同时打开多个模式，则需要编写自定义 javascript。

data-target="#my-modal" 是否应该放在 Twitter Bootstrap 中的模态 div 中？

Should data-target="#my-modal" put inside a modal div in Twitter Bootstrap?

modal-dialog

dismiss

twitter-bootstrap

bootstrap-modal