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

最新推荐文章于 2024-07-27 09:47:37 发布

转载最新推荐文章于 2024-07-27 09:47:37 发布 · 663 阅读

layer插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Layer和Bootstrap框架实现不同类型的弹窗效果，包括提示层、页面层、iframe层、loading层和tips层，以及使用Bootstrap创建modal模态框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>