正文
layer层、modal模拟窗 单独测试页面
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
layer_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用layer——单独的测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<input type="button" value="弹出一个提示层" id="test2"> <script src="static/js/jquery-1.10.1.min.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="static/layer-v3.1.1/layer/layer.js"></script>
<script>
//弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
}); //弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
}); //弹出一个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'test/iframe.html'
});
}); //弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
}); //弹出一个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
</script>
</body>
</html>
bootstrap_model_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用Bootstrap创建modal模态框——单独的测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>使用Bootstrap创建modal模态框</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">唤醒活动</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
<!-- 这里是自动绑定的事件 -->
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p>
</div>
<input type="button" id="test" value="示模态框"> <script src="static/js/jquery-1.10.1.min.js"></script><!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script>
//手动执行
$("#test").click(function(){
//example和<div id="example"对应
$('#example').modal('show');
});
</script>
</body>
</html>
