layer_test.jsp bootstrap_model_test.jsp ...
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>
