简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial H5 > teks badan

HTML5 dialog是什么？怎么使用HTML5中的dialog来实现模拟弹窗？

寻∝梦
Lepaskan： 2018-08-15 17:41:23
asal
4681 orang telah melayarinya

HTML5 dialog是什么？怎么使用HTML5中的dialog来实现模拟弹窗？本篇文章主要讲述HTML5中的dialog标签的定义和具体用法，还有如何在HTML5中通过dialog标签来实现模拟弹窗。

HTML5 dialog标签的定义和用法：

标签定义对话，比如交谈。

这有实例：

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于？</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
Salin selepas log masuk

提示和注释：

提示：对话中的每个句子都必须属于

标签所定义的部分。请看下面的例子。

标签定义及使用说明：

标签定义一个对话框、确认框或窗口。

这是实例：

<table border="1">
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>
Salin selepas log masuk

HTML5 dialog标签属性：

open ：open规定 dialog 元素是有效的，用户可以与它进行交互。

近期,网页上的的许多流程都需要用户完全同意才可以完成。例如，用户可能需要删除帐户，更改他们的用户名，或确认货币交易。

这种情况下，常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消，一个是继续。这么多年，我们一直依靠JavaScript库实现此效果，但在本篇文章中，我们要用

元素实现此效果。

使用dialog元素：

是一个HTML5(精确来说是5.1)元素。它归类为“切片根”，类似，
，和
元素,其中每个都会建立一个新的独立的内容区域，你可以把它作为body的一个孩子，或者是嵌套的元素，如
或
——两种元素都有效，如下所示。

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
Salin selepas log masuk

默认情况下，支持的浏览器(Chrome 37+和Opera 27+)会以隐藏的形式呈现

元素，只有调用JavaScript的show()或showModal()方法才可以显现，调用close()方法再次将其隐藏。通常情况下，我们会在一个click事件上执行此方法，如下所示：

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });
Salin selepas log masuk

自定义样式：

像大多数其他的元素一样，对话框可以很容易覆盖浏览器的默认样式。所以，你可以自定义其样式。例如，使对话框边框更薄，使边角圆润，并添加阴影效果等。

此外，当

元素以模态显示时(使用ShowModal()方法)，我们会添加一个额外的伪元素::backdrop。::backdrop元素会立即驻留在对话框下面，覆盖整个视区和下方的其它元素。

浏览器支持：

目前，只有 Chrome 和 Safari 6 支持

标签。

【相关推荐】

HTML IMG标签的属性是有哪些？了解IMG标签的用法

HTML5中web是什么？web存储中的元素有哪些？

Atas ialah kandungan terperinci HTML5 dialog是什么？怎么使用HTML5中的dialog来实现模拟弹窗？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
sumber：php.cn
Artikel sebelumnya：HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？ Artikel seterusnya：HTML5中的header标签是什么意思？HTML5中header标签具体使用方法你知道吗？
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
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Pilih produk berkaitan woocommerce menggunakan taksonomi tersuai dengan hierarki 3 tahap Saya mempunyai kedai woocommerce dengan klasifikasi tersuai "Sukan". Klasifikasi...
daripada 2024-04-06 20:05:30
0
1
544
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
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
Apakah amalan terbaik untuk memaparkan maklumat versi dalam aplikasi web? Saya sedang membangunkan aplikasi web. Apakah amalan terbaik untuk memaparkan maklumat ver...
daripada 2024-04-06 19:13:16
0
2
476
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
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！