Bootstrap中如何使用模态框

这篇文章主要介绍了Bootstrap中如何使用模态框,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联专业为企业提供科尔沁左翼网站建设、科尔沁左翼做网站、科尔沁左翼网站设计、科尔沁左翼网站制作等企业网站建设、网页设计与制作、科尔沁左翼企业网站模板建站服务,10多年科尔沁左翼做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

1 Bootstrap5模态弹框工作原理

使用Bootstrap的JavaScript模式插件将对话框添加到站点中,用于灯箱、用户通知或完全自定义的内容。

  • 互动视窗是用HTML、CSS和JavaScript构建的。它们位于文件中任何其他内容之上,并从body中删除滚动,以便互动视窗的内容滚动。

  • 点击互动视窗“backdrop”将自动关闭互动视窗。

  • Bootstrap一次只支持一个互动视窗。不支持嵌套互动视窗,因为我们认为嵌套互动视窗用户体验不佳。

  • 互动视窗使用position: fixed,在渲染呈现上会有点特别。尽可能将您的互动视窗HTML放置在顶级位置,以避免其他元素的潜在干扰。在另一个固定元素中内加入一个.modal的时候,你可能会遇到问题。

  • 由于position: fixed,在移动设备上使用互动视窗有一些附加说明。

  • 依据HTML5定义语义的方式,autofocus HTML属性对Bootstrap互动视窗没有影响。要达到同样的效果,请使用一些自定义JavaScript:the autofocus HTML attribute

2 完整示例

2.1 完整示例

通过点击下面的按钮切换动态视窗呈现。它将从页面顶部向下滑动并淡入。点击关闭按钮或者点击背景区域,弹出窗口关闭。



  
    
    
    
    
    
    模态框
  
  
    
    删除内容                         
    
    
      确认提示            
    
      删除后不可恢复!     
    
      关闭       继续删除     
    
    
    
               
        

Bootstrap中如何使用模态框

2.2 静态背景

当将背景设置为静态时,互动视窗不会因为点击背景而关闭。将data-bs-backdrop="static" data-bs-keyboard="false" 加入

        

Bootstrap中如何使用模态框

3.2 使用弹窗滚动条

你可以在modal-dialog 中加入modal-dialog-scrollable 來創建一个 body 可滚动的弹出窗口。

将26.3.1例子中

替换为

Bootstrap中如何使用模态框

4 垂直居中

加入modal-dialog-centeredmodal-dialog来使互动视窗垂直居中。 该设置较为简单,只需做如下改变即可。

下边是带滚动条的

复制代码

上面的例子由于截图只选择了一部分窗口的原因,可能看不出,以下两张图分别是26.2.1演示把窗口拉高后的显示效果,和添加垂直居中后的显示效果。

Bootstrap中如何使用模态框

Bootstrap中如何使用模态框

5 多个模态框切换

在多个模态之间切换,巧妙地放置data-bs-target和data-bs-Toggle属性。例如,可以在已打开的登录模式中切换密码重置模式。请注意,不能同时打开多个模态。这个方法只是在两个单独的模态之间切换。


    Open first modalddd
    
      
        
          
            最新消息
            
          
                       第一条消息           
                       查看下一条                                                                             最新消息                                                第二条消息                                   查看第一条                                   

Bootstrap中如何使用模态框

感谢你能够认真阅读完这篇文章,希望小编分享的“Bootstrap中如何使用模态框”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享标题:Bootstrap中如何使用模态框
链接地址:http://cdiso.cn/article/jsgsjg.html