原创

前端对话框插件simple-dialog使用指南

1、效果预览

预览地址:程序员导航网

image-20220223194042761

2、关键代码

引入代码依赖,对应的代码可以参考

https://www.chenzhuofan.top/static/js/simple-dialog.js

https://www.chenzhuofan.top/static/css/simple-dialog.css

 <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="#">&times;</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>
正文到此结束
本文目录