Bootstrap4 模态框mode 提示框data-toggle="tooltip" 弹出框 data-toggle="popover"

た入场券 2021-09-15 01:58 406阅读 0赞

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

<div class="container">  
  <h2>模态框实例</h2>  
    
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="\#myModal">  
    打开模态框  
  </button>  
     
    
  <div class="modal fade" id="myModal">  
    
    <div class="modal-dialog">  
<div class="modal-content">  
     
          
        <div class="modal-header">  
          <h4 class="modal-title">模态框头部</h4>  
          <button type="button" class="close" data-dismiss="modal">&times;</button>  
    
          
        </div>  
     
          
        <div class="modal-body">  
          模态框内容..  
        </div>  
     
          
        <div class="modal-footer">  
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>  
    
        </div>  
     
      </div>  
    </div>  
  </div>

</div>

![70][]

## 模态框尺寸 ##

我们可以通过添加 **.modal-sm** 类来创建一个小模态框，**.modal-lg** 类可以创建一个大模态框。

尺寸类放在 **<div>**元素的 **.modal-dialog** 类后 :

小边框

<divclass="modal-dialog modal-sm">

modal-lg的用法就是上面的大模拟框

\----------------------------------------------------------------------------------------------------------------------------

## 如何创建提示框 ##

通过向元素添加 **data-toggle="tooltip"** 来来创建提示框。

**title** 属性的内容为提示框显示的内容：

<div class="container">  
  <h3>提示框实例</h3><br>  
  <a href="https://www.csdn.net" data-toggle="tooltip" title="百度">百度</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="tooltip"\]').tooltip();     
\});

</script>

![70 1][]

## 指定提示框的位置 ##

默认情况下提示框显示在元素上方。

可以使用 **data-placement** 属性来设定提示框显示的方向: top, bottom, left 或 right:

<div class="container">  
  <h3>提示框实例</h3><br>  
  <a href="\#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>  
  <a href="\#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>  
  <a href="\#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>  
  <a href="\#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="tooltip"\]').tooltip();

\});

![70 2][]

## 如何创建弹出框 ##

通过向元素添加 **data-toggle="popover"** 来来创建弹出框。

**title** 属性的内容为弹出框的标题，**data-content** 属性显示了弹出框的文本内容：

<div class="container">  
  <h3>弹出框实例</h3>  
  <a href="\#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="popover"\]').popover();     
\});

</script>

![70 3][]

指定弹出框的位置 data-placement

<div class="container">  
  <h3>弹出框实例</h3> <br><br><br><br><br><br>  
  <a href="\#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>  
  <a href="\#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>  
  <a href="\#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>  
  <a href="\#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="popover"\]').popover();     
\});

</script>

![70 4][]

取消弹出框**data-trigger="focus"**

<div class="container">  
  <h3>弹出框实例</h3> <br>  
  <a href="\#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="popover"\]').popover();     
\});

</script>

![70 5][]

鼠标移动时显示**data-trigger** 属性，并设置值为 "hover

![70 6][]

<div class="container">  
  <h3>弹出框实例</h3> <br>  
  <a href="\#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">鼠标移动到我这</a>  
</div>  
  
  
<script>  
$(document).ready(function()\{  
    $('\[data-toggle="popover"\]').popover();     
\});  
</script>

[70]: /images/20210813/99c52d8ee4a047e8b4da49aa69788c8a.png
[70 1]: /images/20210813/e4171b7fd8b047e699f74ea6e1e332f9.png
[70 2]: /images/20210813/29c0c418b01d4947b3981c7027fc447f.png
[70 3]: /images/20210813/607415d73a28439dbcb5d107e5d0f638.png
[70 4]: /images/20210813/8b5b8fed60074342a4b8d2993c45cccb.png
[70 5]: /images/20210813/92582a463c584a81aa2e07f50fab42e0.png
[70 6]: /images/20210813/111892f1fa6b4efcaedf869a6ec80cdd.png