bootstrap 怎么关闭弹出框

1. 关闭bootstrap弹出框的方法

在使用Bootstrap框架进行网页开发时，经常会用到弹出框组件。而在一些特定的情况下，需要手动关闭一个弹出框，本文将介绍两种方法来关闭Bootstrap弹出框。

1.1 使用jQuery

首先，需要确保在使用这种方法之前已经将jQuery添加到页面中。接下来，可以使用Bootstrap提供的jQuery插件来关闭一个弹出框。具体步骤如下：

$('#myModal').modal('hide');

其中，`#myModal`为Bootstrap弹出框的id。这个id可以在HTML标签上设置。例如：

<div id="myModal" class="modal fade">...</div>

当需要关闭这个弹出框时，只需要执行上述代码即可。

1.2 使用JavaScript

除了使用jQuery插件来关闭Bootstrap弹出框之外，还可以使用普通的JavaScript代码完成这个功能。具体步骤如下：

var myModal = document.getElementById('myModal');

myModal.style.display = 'none';

同样地，`myModal`为Bootstrap弹出框的id，可以在HTML标签上设置。当需要关闭这个弹出框时，只需要执行上述代码即可。

2. 关闭Bootstrap弹出框的实例

下面，我们将以一个实例来展示如何关闭Bootstrap弹出框。具体步骤如下：

2.1 准备HTML代码

首先，需要在HTML中添加一个按钮和一个弹出框。代码如下：

<button class="btn btn-primary btn-lg" data-toggle="modal"

        data-target="#myModal">打开弹出框</button>
 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <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" id="myModalLabel">标题</h4>
                </div>
                <div class="modal-body">
                    正文
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

这段代码中，我们定义了一个按钮，当点击这个按钮时，会弹出一个带有标题、正文和按钮的弹出框。

2.2 使用jQuery关闭弹出框

接下来，我们在JavaScript中使用jQuery来关闭这个弹出框。代码如下：

<script>

    $(document).ready(function () {
        $('.btn-primary').on('click', function () {
            $('#myModal').modal('hide');
        });
    });
</script>

这段代码中，我们使用了jQuery来绑定一个点击事件。当用户点击按钮时，会自动关闭弹出框。

2.3 使用JavaScript关闭弹出框

除了使用jQuery之外，我们也可以使用普通的JavaScript代码来关闭弹出框。代码如下：

<script>

    $(document).ready(function () {
        $('.btn-primary').on('click', function () {
            var myModal = document.getElementById('myModal');
            myModal.style.display = 'none';
        });
    });
</script>

这段代码中，我们也绑定了一个点击事件，当用户点击按钮时，会自动关闭弹出框。

3. 结论

现在，我们已经了解了如何关闭Bootstrap弹出框。无论是使用jQuery还是普通的JavaScript，都可以完成这个功能。因此，根据具体的开发需求和喜好选择使用哪种方法都是OK的。