首页 > 其他分享 >html show modal dialog

html show modal dialog

时间:2023-03-03 18:23:28浏览次数:48  
标签:function dialog show html modal event

    <button onclick="showModalDialog()">show modal dialog</button>
    <dialog id="dialog" onclose="onModalClose(event)">
        <header>This is a sample dialog</header>
        <form method="dialog">
            <p>What is your favorite pet animal?</p>
            <menu>
                <button value="feline">Cats</button>
                <button value="canine">Dogs</button>
                <button value="other">other</button>
            </menu>
        </form>
    </dialog>

    <script type="text/javascript">
        function showModalDialog() {
            document.querySelector('#dialog').showModal()
        }
        function onModalClose(event) {
            const value = event.target.returnValue
            console.log(value)
        }
    </script>

https://watercss.kognise.dev/#installation

标签:function,dialog,show,html,modal,event
From: https://www.cnblogs.com/hangj/p/17176612.html

相关文章

  • HTML 符号实体
    HTML符号实体本字符实体参考手册包括了数学符号、希腊字符、各种箭头记号、科技符号以及形状。注释: 实体名称对大小写敏感。HTML支持的数学符号字符实体编号实体......
  • vue打包后打开index.html文件显示空白页问题
    通过网上的资料发现在vue.config.js中写入再重新打包就可以再index.html中显示。https://blog.csdn.net/m0_51060602/article/details/123411536 ......
  • python+playwright 学习-19.监听dialog事件-优雅处理对话框
    前言网页上的alert弹出框你不知道什么时候弹出来,selenium处理alert弹出框的方式是先判断有没alert再处理,并且只能处理这一次。playwright框架可以监听dialog事件,不管......
  • 004. html篇之《标签分类和嵌套》
    html篇之《标签分类和嵌套》一、常用标签(1)<div></div>一个区块容器标记,可以包含图片、表格、段落等各种html元素(2)<span></span>没有实际意义,为了应用样式......
  • HTML-CSS常用代码
    注释标签:对代码进行说明<!--单行注释,也可以对多行文字进行注释-->常用格式标签<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落标签</p> <hr>:分割线 <br>......
  • 前端三件套--读书笔记(一)HTML
    前端三件套--读书笔记(一)HTML摘要:书名:《网页设计与编程》-------耿增民内容:HTML的基本标签一、HTML标签语法:注释标签:<!--注释标签-->标签的属性:<标签名......
  • UnitTest & HTMLTestRunner测试生成报告
    1.简介UnitTest是python自带的自动化测试框架UnitTest主要包含的内容TestCase(测试用例)TestSuite(测试套件,把多个TestCase集成到一个测试Testsuite)TestRunner(执......
  • 软件工程日报七——checkbox的使用和AlertDialog
    今天学了checkbox的使用<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://s......
  • gin响应html数据
    和gin响应json数据差不多,代码如下:packagemainimport"github.com/gin-gonic/gin"func_html(c*gin.Context){ c.HTML(200,"index.html",gin.H{"username":"Eva......
  • js 正则 htmlEncode, htmlDecode
    参考:https://www.cnblogs.com/moqiutao/p/15629810.html//html编码解码exportfunctionhtmlEncodeByRegExp(str){vars='';if(str.length===0){ret......