masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 弹出最简单的模式化遮罩层的js代码_javascript技巧

弹出最简单的模式化遮罩层的js代码_javascript技巧

WBOY
Lepaskan： 2016-05-16 17:10:39
asal
1096 orang telah melayarinya

假设我们有一个容器container如下:

复制代码 代码如下:






现在要在网页中弹出一个div层，使在关闭弹出的div层之前不可操作container。
那么，我们首先需要定义出这个遮罩的div层如下:
复制代码 代码如下:



接下来，就是用js来使遮罩层始终显示在屏幕上并不可操作遮罩层下面的内容，点击关闭按钮关闭遮罩层
复制代码 代码如下:


Label berkaitan：
弹出 lapisan topeng
sumber：php.cn
Artikel sebelumnya：JS获取html对象的几种方式介绍_javascript技巧 Artikel seterusnya：JS获取URL中的参数数据_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1361
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1284
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Kira jumlah medan dalam jadual lain menggunakan pertanyaan MySQL SQL Saya mempunyai skema seperti ini: Jadual pengguna dengan atribut "user_id" dan &...
daripada 2024-04-06 19:39:29
0
1
441
Masalah mendapatkan statistik tertentu (Statistik) daripada PokeAPI menggunakan Axios dan Node.js Saya mempunyai masalah, saya cuba menggunakan PokemonAPI, tetapi apabila saya cuba mengaks...
daripada 2024-04-06 18:46:35
0
1
464
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan