原创

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

1、效果预览

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>

正文到此结束

所属分类：资源分享

本文标签： 前端工具
版权声明： 本站原创文章，于2022年02月24日由Mars发布，转载请注明出处

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

1、效果预览

2、关键代码

3、特别说明

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息