前端对话框插件simple-dialog使用指南
1、效果预览
预览地址:程序员导航网
2、关键代码
引入代码依赖,对应的代码可以参考
<link rel="stylesheet" href="/static/css/simple-dialog.css">
<script src="/static/js/simple-dialog.js"></script>
对话框的使用
<p><a href="#" rel="rs-dialog" data-target="myModal1" class="showButton">查看全部</a>
<div class="rs-dialog" id="myModal1">
<div class="rs-dialog-box">
<a class="close" href="#">×</a>
<div class="rs-dialog-header">
<h3>人工搜索</h3>
</div>
<div class="rs-dialog-body">
<p class="con-all">${article.content}</p>
</div>
<div class="rs-dialog-footer">
<input type="button" class="close" value="Close" style="float:right">
</div>
</div>
</div>
主要 分两部分
- 引入锚点
- 定义对话框的内容
3、特别说明
因为这个插件是基于jquery的,所以不要忘记引入jquery的依赖
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
正文到此结束