Bootstrap从入门到实战---模态框

Bootstrap从入门到实战—模态框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><!-- 移动设备优先 --><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 引入Bootstrap CSS --><link rel="stylesheet" href="css/bootstrap.css"><style>body {padding:20px;}</style>
</head><!-- 高洛峰的简单例子 --><div class="modal fade" id="mymodal"><div class="modal-dialog modal-dialog-centered modal-sm"><div class="modal-content"><div class="modal-header"><h5>添加商品</h5><button class="close" data-dismiss="modal"><span>&times;</span></button></div><div class="modal-body">正在添加商品</div><div class="modal-footer"><button class="btn btn-success">确定</button><button class="btn btn-secondary" data-dismiss="modal">取消</button></div></div></div></div><button class="btn btn-success" data-target="#mymodal" data-toggle="modal">弹出模态框</button><!-- 以下为手册例子 --><!-- 简单例子 --><div class="modal fade" id="mymodal2" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><button class="btn btn-success" data-target="#mymodal2" data-toggle="modal">mymodal2</button><!-- 滚动长内容 --><div class="modal fade" id="mymodal3" tabindex="-1"><div class="modal-dialog modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><button class="btn btn-success" data-target="#mymodal3" data-toggle="modal">mymodal3</button><!-- 工具提示和弹出框 --><div class="modal fade " id="mymodal4" tabindex="-1"><div class="modal-dialog  modal-xl"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><h5>Popover in a modal</h5><p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."> button</a> triggers a popover on click.</p><hr><h5>Tooltips in a modal</h5><p><a href="https://www.baidu.com/" class="tooltip-test" title="Tooltip">This link</a>  and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p></div><div class="modal-body"><div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.eduwork.cn" frameborder="0"></iframe></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><button class="btn btn-success" data-target="#mymodal4" data-toggle="modal">mymodal4</button><!-- 工具提示和弹出框2 --><div class="modal fade " id="mymodal5" tabindex="-1"><div class="modal-dialog  modal-xl"style="height: 100px; right: 10px;position: absolute;"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><h5>Popover in a modal</h5><p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."> button</a> triggers a popover on click.</p><hr><h5>Tooltips in a modal</h5><p><a href="https://www.baidu.com/" class="tooltip-test" title="Tooltip">This link</a>  and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p></div><div class="modal-body"><div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.eduwork.cn" frameborder="0"></iframe></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><button class="btn btn-success" data-target="#mymodal5" data-toggle="modal">mymodal5</button><!-- 嵌套modal --><div class="modal fade" id="mymodal6" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><p>Modal body text goes here.</p><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="images/1.jpg"style="height: 50px;" class="rounded mr-2" alt="..." ><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message1.</div></div><div class="card"style="width: 18rem;"><img src="images/1.jpg"style="height: 100px;" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a><button id="btn" class="btn btn-success">弹出弹框</button></div></div></div></div></div></div><button class="btn btn-success" data-target="#mymodal6" data-toggle="modal">放入card</button><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="images/1.jpg"style="height: 50px;" class="rounded mr-2" alt="..." ><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message1.</div></div><!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js --><script src="js/jquery-3.4.1.slim.min.js"></script><script src="js/bootstrap.bundle.js"></script><script>$('#btn').click(function(){$('.toast').toast('show');});</script></body>
</html>

Bootstrap从入门到实战---模态框相关推荐

Bootstrap从入门到实战---点击提示和悬停提示
Bootstrap从入门到实战-点击提示和悬停提示 <!DOCTYPE html> <html lang="en"> <head><met ...
Bootstrap从入门到实战---巨幕和旋转图标
Bootstrap从入门到实战-巨幕和旋转图标 <!DOCTYPE html> <html lang="en"> <head><meta ...
零基础Bootstrap入门教程(16)--模态框
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述模态框 ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
Bootstrap插件（一）——模态框（modal.js）
前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法.参数等:下面是modal的内容 ...
Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件
模态框模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. <div class=" ...
bootstrap——模态框
目录模态框类似js中alert(); 1.模态框的主样式:modal 2.模态框的代码最好是直接作为body的子元素,而不是后代元素 3.模态框的区域: 4.与Bootstrap.js中的相关属 ...
Bootstrap学习之模态框（Modal）插件
Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互 ...
(四十二)模态框的使用
模态框使用模态框使用流程参考 Bootstrap 官方文档拷贝模态框的元素, 点击JavaScript插件,选择模态框,里面有许多样式,以其中的样式为例放在页面的body元素中,然后再加入i ...

Bootstrap从入门到实战---模态框

Bootstrap从入门到实战---模态框相关推荐

最新文章

热门文章