使用Jquery仿模态对话框插件Remodal实现弹出响应窗口

来源：互联网发布：知乎怎么推送到kindle 编辑：程序博客网时间：2024/06/05 20:50

remodal是一个轻量级、扁平化、响应式模态窗口，可以监测浏览器的大小自适应的的窗口。使用声明式状态符号和哈希（Hash）跟踪。所有现代的浏览器都支持。

首先它是一个插件。下载之后解压，dist中放了你要使用的css和js，examples存放了demo,可以直接贴过来用,简单方便。

使用方法

在HTML文件的head中包含dist文件夹中的CSS文件和JS文件：

1
2
<link rel="stylesheet" href="dist/remodal.css">
<link rel="stylesheet" href="dist/remodal-default-theme.css">
<script src ="dist/remodal.min.js"> </script>

可以为模态定义背景容器（如模糊效果）。它可以是任何简单的内容包装器：

1
2
3
<div class =“remodal-bg”>
...页面内容...
</ DIV>

今天使用Remodal实现点击文本打开一个窗口，先上效果图：

实现步骤：

1、定义超链接文本

<p class="name" style="font-size:14px;color:#2A3F54;text-align:center"> 学生出勤率黑榜

3       <span class = "pull-right">      <a href="javascript:;" onclick="viewTable()" style="font-size:12px;color:#7FFFD4;padding-right: 10px"> 查看所有 </a>      </span>

</p>

2、定义模态窗口对话框

<div class="remodal" data-remodal-id="remodal-data" data-remodal-options="hashTracking:false" style="height: auto;max-width:75%;"><button data-remodal-action="close" class="remodal-close"></button><div class="col-md-12 col-sm-12 col-xs-12"><div class="x_title">                            <h2 style="text-align:left;">所有学生的出勤率</h2>                            <div class="clearfix"></div></div><div class="x_content" style="line-height: 2.0; text-align:left;">                            <table id="remodal_table" class="table table-bordered table-striped no-margin" cellspacing="0" width="100%">                                    <thead>                                            <tr>                                                    <th>姓名</th>                                                    <th>总课时</th>                                                    <th>出席</th>                                                    <th>请假(次)</th>                                                                      <th>出勤率</th>                                            </tr>                                    </thead>                                    <tbody>                                </tbody>                            </table></div></div></div>


不要使用ID属性，如果你不想让浏览器滚动锚点，用data-remodal-id.
可以使用data-remodal-options属性传递其他选项。必须有效的JSON数据
3、定义onclick事件处理函数
function viewTable(){  var inst_remodal = $('[data-remodal-id="remodal-data"]').remodal();inst_remodal.open();        if(TAttendence_table)        {            TAttendence_table.clear().draw();            TAttendence_table.destroy();        }        TAttendence_table = $('#aremodal_table').DataTable({'dom': 'Bfrtip<"clear">',                'buttons': [],"ordering" : false,"paging": true,"ajax" : {"data" : {},"dataType" : 'json',"type" : "POST","url" : "./ajax/ajaxAllBookings.php"},"columns" : [{"mData" : "nickname","bSortable" : true},{"mData" : "schedules.length","bSortable" : false,},{"mData" : "current","bSortable" : false,},{"mData" : "leave","bSortable" : false,},{"mData" :"attendance","bSortable" : false,}],"oLanguage" : {"sLengthMenu" : "每页显示 _MENU_ 条记录","sZeroRecords" : "抱歉， 没有找到","sInfo" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty" : "没有数据","sInfoFiltered" : "(从 _MAX_ 条数据中检索)","oPaginate" : {"sFirst" : "首页","sPrevious" : "前一页","sNext" : "后一页","sLast" : "尾页"},"sSearch" : "搜索","sProcessing": "正在加载...","sZeroRecords" : "没有试听课"}});}

<script type="text/javascript" src="./js/manager_booking.js"></script>

阅读全文

0 0