当前位置： 移动技术网 > IT编程>开发语言>JavaScript > layer层、modal模拟窗 单独测试页面

layer层、modal模拟窗 单独测试页面

2018年09月14日  | 移动技术网IT编程  | 我要评论

layer_test.jsp

 1 <%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
 2 <!doctype html>
 3 <html>
 4 <head>
 5   <meta charset="utf-8">
 6   <title>开始使用layer——单独的测试页面</title>
 7   <meta http-equiv="pragma" content="no-cache">
 8     <meta http-equiv="cache-control" content="no-cache">
 9     <meta http-equiv="expires" content="0">
10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11     <meta http-equiv="description" content="this is my page">
12 </head>
13 <body>
14     <input type="button" value="弹出一个提示层" id="test2">
15   
16   <script src="static/js/jquery-1.10.1.min.js"></script> <!-- 你必须先引入jquery1.8或以上版本 -->
17   <script src="static/layer-v3.1.1/layer/layer.js"></script> 
18   <script> 
19   //弹出一个提示层
20   $('#test1').on('click', function(){
21     layer.msg('hello');
22   });
23   
24   //弹出一个页面层
25   $('#test2').on('click', function(){
26     layer.open({
27       type: 1,
28       area: ['600px', '360px'],
29       shadeclose: true, //点击遮罩关闭
30       content: '\<\div style="padding:20px;">自定义内容\<\/div>'
31     });
32   });
33   
34   //弹出一个iframe层
35   $('#parentiframe').on('click', function(){
36     layer.open({
37       type: 2,
38       title: 'iframe父子操作',
39       maxmin: true,
40       shadeclose: true, //点击遮罩关闭层
41       area : ['800px' , '520px'],
42       content: 'test/iframe.html'
43     });
44   });
45  
46   //弹出一个loading层
47   $('#test4').on('click', function(){
48     var ii = layer.load();
49     //此处用settimeout演示ajax的回调
50     settimeout(function(){
51       layer.close(ii);
52     }, 1000);
53   });
54   
55   //弹出一个tips层
56   $('#test5').on('click', function(){
57     layer.tips('hello tips!', '#test5');
58   });
59   </script>
60 </body>
61 </html>

bootstrap_model_test.jsp

 1 <%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
 2 <!doctype html>
 3 <html>
 4 <head>
 5   <meta charset="utf-8">
 6   <title>开始使用bootstrap创建modal模态框——单独的测试页面</title>
 7   <meta http-equiv="pragma" content="no-cache">
 8     <meta http-equiv="cache-control" content="no-cache">
 9     <meta http-equiv="expires" content="0">
10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11     <meta http-equiv="description" content="this is my page">
12     <link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
13 </head>
14 <body>    
15     <div class="container">
16         <h2>使用bootstrap创建modal模态框</h2>
17         <div id="example" class="modal hide fade in" style="display: none; ">
18             <div class="modal-header">
19                 <a class="close" data-dismiss="modal">×</a>
20                 <h3>这是一个模态框标题</h3>
21             </div>
22             <div class="modal-body">
23                 <h4>模态框中的文本</h4>
24                 <p>你可以在这添加一些文本。</p>
25             </div>
26             <div class="modal-footer">
27                 <a href="#" class="btn btn-success">唤醒活动</a>
28                 <a href="#" class="btn" data-dismiss="modal">关闭</a>
29             </div>
30         </div>
31        <!-- 这里是自动绑定的事件 -->
32         <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p>
33     </div>    
34     <input type="button" id="test" value="示模态框">
35     
36   <script src="static/js/jquery-1.10.1.min.js"></script><!-- 你必须先引入jquery1.8或以上版本 -->
37   <script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
38   <script>
39   //手动执行
40   $("#test").click(function(){
41       //example和<div id="example"对应
42       $('#example').modal('show');
43   });
44   </script>
45 </body>
46 </html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网