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

，和

元素,其中每个都会建立一个新的独立的内容区域，你可以把它作为body的一个孩子，或者是嵌套的元素，如

或

——两种元素都有效，如下所示。

默认情况下，支持的浏览器(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(); 
  });

自定义样式：

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

此外，当

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

浏览器支持：

目前，只有 Chrome 和 Safari 6 支持

标签。

【

• html
• javascript
• chrome
• safari

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

• java

  Voicewo在线语音识别转换jQuery插件的特点和示例

  

  本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

  蜡笔小新   2023-12-13 20:01:16
• int

  Python瓦片图下载、合并、绘图、标记的代码示例

  

  本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

  蜡笔小新   2023-12-13 12:14:55
• request

  使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例

  

  本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤，可以获取到网站首页的新闻数据。代码示例使用Python编写，并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]

  蜡笔小新   2023-12-12 19:16:21
• php

  ECMA262规定typeof操作符的返回值和instanceof的使用方法

  

  本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值，以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]

  蜡笔小新   2023-12-10 17:31:51
• java

  常用的CSS属性及用法整理

  本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

  蜡笔小新   2023-12-09 03:01:43
• grid

  CSS |网格行结束属性

  CSS|网格-行-结束属性原文:https://www.gee ... [详细]

  蜡笔小新   2023-10-17 15:21:56
• grid

  css元素可拖动,如何使用CSS禁止元素拖拽？

  

  一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]

  蜡笔小新   2023-10-17 14:35:15
• java

  pyecharts 介绍

  

  一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]

  蜡笔小新   2023-10-16 08:29:03
• java

  axure 动态面板 自动适应浏览器宽度_Axure技能：自适应移动设备屏幕大小（进阶教程）...

  《Axure新技能：自适应手机屏幕大小》相信不少人都已经看过，并对设置方法已经很熟悉了，但该教程只能适应iphone6的屏幕尺寸的比例&# ... [详细]

  蜡笔小新   2023-10-15 15:56:01
• get

  Python爬虫_HTTP标准

  文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议（超文本传输协议）是用于从WWW服务 ... [详细]

  蜡笔小新   2023-10-15 14:59:43
• get

  Python-图片和视频文件爬虫

  最近在学Python，看了不少资料、视频，对爬虫比较感兴趣，爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]

  蜡笔小新   2023-10-15 09:28:43
• go

  前端提高篇(七十)：SVG基本使用、基本样式、路径path

  

  SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范，与html5的使用有所区别SVG绘制出来的是矢量图，放大之后不会失真官方文 ... [详细]

  蜡笔小新   2023-10-14 15:30:33
• go

  macOS Big Sur全新设计大版本更新，10+个值得关注的新功能

  

  本文介绍了Apple发布的新一代操作系统macOS Big Sur，该系统采用全新的界面设计，包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出，macOS Big Sur的设计与iPadOS越来越接近，结合了去年iPadOS对鼠标的完善等功能。 ... [详细]

  蜡笔小新   2023-12-10 19:53:41
• java

  Google Contacts API未返回输出 - Google Contacts API not returning output

  Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]

  蜡笔小新   2023-10-15 16:40:16
• php

  Signing Identities, Missing Private Key, Cannot sign App

  这个问题发生在重新安装系统后，丢失了之前的privatekey等。所以解决方法就是提示的revokeandrequest。到developercenter中找到certificat ... [详细]

  蜡笔小新   2023-10-15 12:07:56