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

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>