使用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:;" οnclick="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>










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值