html+js 实现一个点击按钮弹出dialog的功能
时间: 2023-05-23 18:02:48 浏览: 607
可以使用jQuery UI中的dialog方法来实现该功能。
首先需要在HTML中导入jQuery和jQuery UI的JS和CSS文件:
```
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
```
然后在HTML中添加一个按钮和一个隐藏的dialog框:
```
<button id="myButton">点击弹出dialog</button>
<div id="myDialog" style="display:none">
<p>这里是弹窗内容</p>
</div>
```
最后在JS文件中使用dialog方法绑定按钮点击事件:
```
$( "#myButton" ).click(function() {
$( "#myDialog" ).dialog({
modal: true,
buttons: {
"确定": function() {
$( this ).dialog( "close" );
}
}
});
});
```
这样点击按钮即可弹出一个对话框,点击确定按钮即可关闭对话框。
阅读全文