外贸网站的特点,温州网站建设wmwl,抖音小程序,企业网站建设费1、演示 2、介绍 dialog 标签用于定义对话框#xff0c;即一个独立的窗口#xff0c;通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中#xff0c;可以包含文本、表单元素、按钮等内容#xff0c;用户可以和这些内容进行交互。 3、兼容性 4、示例代码 …1、演示 2、介绍 dialog 标签用于定义对话框即一个独立的窗口通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中可以包含文本、表单元素、按钮等内容用户可以和这些内容进行交互。 3、兼容性 4、示例代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle#dialog {border: 0;width: 500px;height: 500px;border: 1px solid #000;}#dialog::backdrop {background-color: rgba(0, 0, 0, 0.3);backdrop-filter: blur(1px);}/style/headbody!-- 弄成模态框 showModal --button classopenBtn弹窗/buttondialog iddialogdiv classwinp这是一个弹框/ppinput typetext //ppinput typetext //pbutton classcloseBtn关闭/button/div/dialog/bodyscriptconst dialog document.getElementById(dialog)const openBtn document.querySelector(.openBtn)const closeBtn document.querySelector(.closeBtn)dialog.addEventListener(close, function (e) {console.log(弹框关闭了)})openBtn.addEventListener(click, function () {// dialog.showdialog.showModal()})closeBtn.addEventListener(click, function () {dialog.close()})/script
/htmlopen 属性设置该属性为 true 时对话框会默认打开显示为 false 时则关闭。可以使用 JavaScript 来动态改变这个属性来控制对话框的显示状态。 showModal() 方法调用该方法可以以模态的形式显示对话框即使用户点击其他部分页面也无法操作。一般在需要用户做出重要选择或者确认时使用。 show() 方法调用该方法可以显示对话框但允许用户在显示的同时与页面上其他元素交互。 close() 方法调用该方法可以关闭对话框。 ::backdrop通过改伪元素的方式修改模态背景。
