js实现点击一个按钮打开或关闭dialog对话框

JavaScript013

js实现点击一个按钮打开或关闭dialog对话框,第1张

<html>

<head></head>

<body>

<!-- dialog -->

    <button onclick=dakai()></button>

    <dialog id='dialog'>this is a dialog</dialog>

<script>

    var dakai=function(){

        var x=document.getElementById("dialog").open

        console.log(x)

        if(x){

            document.getElementById("dialog").removeAttribute('open')

        }else{

            document.getElementById("dialog").setAttribute('open','open')

 }

</script>

</body>

</html>

除了基本的alert、comfirm、prompt以外 我们还横向扩展了选项组的actions，以及自定义填充图片或者内容的dialog。

满足了基本需求外，我们还纵向扩展了点击弹窗时的异步载入能力，使其满足需要点击后加载数据，加载完成才能关闭弹窗的场景。

对于prompt，我们还提供了轻量可扩展的文本域校验以及错误提示。

由于该组件面向小型项目以及非工程化的项目，我们提供了umd打包的版本以及window打包的版本，以满足所有零碎项目的需求。

面向开发者，我们提供了完善的类型推导文件(d.ts)。使其在开发过程中拥有能够更好的体验。由于是基于Typescript开发的，我们的组件对Typescript项目拥有完全的亲和力。

除了支持基础的alert、confirm、prompt外 还扩展了

此外 支持html模板渲染，自定义prompt文本域检查等功能 满足绝大部分弹窗场景

对于非工程化项目

VueDialogX支持script标签引入

对于工程化项目，VueDialogX提供umd方式引入

VueDialogX 提供两种挂载方式

一种使用Vue.use的方式挂载

也可以引入VueDialogX来自行初始化实例

你肯定会有一个按钮点击事件Onclick（）之类的，点击可以弹出dialog,还会有一个div加载需要dialog的需要的数据等。

$("#divId").dialog（{

  里面类似easyui的dialog

}）

3.点击事件在js添加一个$("#divId").dialog("open")

即可，希望可以帮助到你，望采纳!