Bootstrap怎么实现遮罩层效果？（代码示例）
下面本篇文章给大家介绍一下Bootstrap实现遮罩层效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关教程推荐：《bootstrap教程》
效果图如下：
1、点击打开遮罩层按钮
2、弹出一个隐藏的p
源码下载地址：http://download.csdn.net/detail/u014175572/9564824
实现代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>遮罩层DEM</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/index/index.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-2.1.4.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="js/adaptIE/html5shiv.min.js"></script> <script src="js/adaptIE/respond.min.js"></script> <![endif]--> <style> </style> </head> <body> <div class="container-fluid text-center"> <h2>遮罩层DEMO</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 打开遮罩层 </button> <!-- 模态框（Modal） --> <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"> × </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> <!-- /.modal-content --> </div> <!-- /.modal --> </div> </body> </html>
代码讲解：
- 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
- 如果您仔细查看上面的代码，您会发现在
- 在模态框中需要注意两点：
- 第一是 .modal，用来把
的内容识别为模态框。
- 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
- 第一是 .modal，用来把
- aria-labelledby="myModalLabel"，该属性引用模态框的标题。
- 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
，modal-header 是为模态窗口的头部定义样式的类。
- class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
- data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
- class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
- class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
- data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
更多编程相关知识，请访问：编程教学！！
Atas ialah kandungan terperinci Bootstrap怎么实现遮罩层效果？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimanakah saya tetap terkini dengan siaran dan kemas kini bootstrap terkini?
Mar 14, 2025 pm 07:40 PM
Artikel ini membincangkan strategi untuk terus dikemas kini dengan siaran bootstrap, mengakses dokumentasi rasmi, amalan terbaik untuk integrasi, dan sumber komuniti untuk perbincangan.
Adakah saya perlu menggunakan Flexbox di tengah gambar bootstrap?
Apr 07, 2025 am 09:06 AM
Terdapat banyak cara untuk memusatkan gambar bootstrap, dan anda tidak perlu menggunakan Flexbox. Jika anda hanya perlu berpusat secara mendatar, kelas pusat teks sudah cukup; Jika anda perlu memusatkan elemen secara menegak atau berganda, Flexbox atau Grid lebih sesuai. Flexbox kurang serasi dan boleh meningkatkan kerumitan, manakala grid lebih berkuasa dan mempunyai kos pengajian yang lebih tinggi. Apabila memilih kaedah, anda harus menimbang kebaikan dan keburukan dan memilih kaedah yang paling sesuai mengikut keperluan dan keutamaan anda.
Bagaimanakah saya menyesuaikan penampilan dan tingkah laku komponen Bootstrap?
Mar 18, 2025 pm 01:06 PM
Artikel membincangkan penyesuaian penampilan dan tingkah laku Bootstrap menggunakan pembolehubah CSS, SASS, CSS adat, JavaScript, dan pengubahsuaian komponen. Ia juga meliputi amalan terbaik untuk mengubahsuai gaya dan memastikan responsif merentasi peranti.
Cara mendapatkan bar carian bootstrap
Apr 07, 2025 pm 03:33 PM
Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.
Bagaimana saya mengatasi gaya bootstrap tanpa mengubah fail kerangka teras?
Mar 14, 2025 pm 07:44 PM
Artikel ini membincangkan kaedah untuk mengatasi gaya Bootstrap menggunakan CSS tersuai, memberi tumpuan kepada mewujudkan fail berasingan, menggunakan kekhususan, dan amalan terbaik untuk organisasi.
Cara melakukan pusat menegak bootstrap
Apr 07, 2025 pm 03:21 PM
Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.
Bagaimana saya membuat laman web bootstrap boleh diakses (a11y)?
Mar 14, 2025 pm 07:36 PM
Artikel ini membincangkan membuat laman web bootstrap boleh diakses dengan mematuhi piawaian WCAG, menggunakan HTML semantik, memastikan kontras yang betul, membolehkan navigasi papan kekunci, melaksanakan ARIA, dan menjalankan audit biasa.
Bagaimanakah saya menggunakan sistem grid Bootstrap untuk membuat susun atur responsif untuk saiz skrin yang berbeza?
Mar 14, 2025 pm 07:43 PM
Artikel membincangkan menggunakan sistem grid Bootstrap untuk susun atur responsif merentasi peranti, memperincikan struktur, penyesuaian, dan alat ujian.
