# popup

弹出层包括模态对话框、提示条、popover、alert。它们都可以用来提示或者警告用户，或者显示详细信息。

## 模态对话框

模态对话框就是一个对话框，它在继续下一步工作前来提示重要信息给用户，并可能会要求用户做出不同操作的选择。

如下代码可以点击一个按钮，弹出模态对话框：

```
<a class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch</a>
<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">&times;</button>
                <h4 class="modal-title">title1</h4>
            </div>
            <div class="modal-body">
                <p>Body1</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
```

模态对话框的DOM结构嵌套的有点深。使用类来表达这个层次，看起来是这样的：

```
-.modal
--.modal-content
----.modal-header
----.modal-body
----.modal-footer
```

就是说，一个模态对话框内部有header、body、footer构成。可以使用data属性来做模态对话框的弹出和关闭。第一行代码中的data-toggle="modal"表示做模态切换，data-target="#myModal"表示切换的目标为id等于myModal的元素。另外应该说明的是这行代码：

× 其中的内容\`×\`表示的就是乘号（✖️），常常用来做关闭按钮的图标。类似的这个按钮也使用了data属性（data-dismiss="modal"）做模态关闭。 ##tooltip 当鼠标移动到a标签上，默认会显示一个提示条，内容为title指定的： [foo](https://1000copy.gitbook.io/bootstrap/gao-ji-lei/4.popup) 想要这个提示条酷一点的话，可以加入两个data属性： [foo](https://1000copy.gitbook.io/bootstrap/gao-ji-lei/4.popup) 并且加入JavaScript代码： $(document).ready(function(){ $('\[data-toggle="tooltip"]').tooltip(); }); 属性data-placement只是提示条的位置，可以是“top | bottom | left | right | auto”。我们再次看到data-toggle，这里是切换tooltip的显示。 一个看起来比较符合bootstrap风味的提示条就出来了。 ## popover 用来显示当前元素的补充信息。和提示条（tooltip）只能有内容相比，前者显示信息可以由页头和主体。代码如下： Popover

并且需要加入JavaScript代码，用来启动popover，并设置它的显示位置：

```
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'right'
    });
});
```

你需要为当前元素加入属性data-toggle="popover"表示做popover切换，title="title"放入popover的标题，data-content="content"放入popover的内容。

## alert

用来弹出需要用户立刻注意到，如警告和确认类的信息。比如：

&#x20;[×](https://1000copy.gitbook.io/bootstrap/gao-ji-lei/4.popup) **Warning!** There was a problem with your network connection.

这是一个alert，类型为alert-warning，因此是一个警告型的alert。相应的，还可以选择alert-danger、alert-info、alert-success等类型。

代码：

```
<a href="#" class="close" data-dismiss="alert">&times;</a>
```

提供了一个关闭按钮，它的data-dismiss="alert"属性表明，点击之可以关闭alert。