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>

layer层、modal模拟窗 单独测试页面的更多相关文章

  1. charles_02_模拟弱网测试

    前言 用户使用app的场景是多变的,不一定稳定在WiFi或者4G网络下.大多数用户会在地铁.电梯等弱网情况下使用app,这些弱网情况下app常会出现一些数据丢失.闪退.页面展示不友好等情况.在测试过程 ...

  2. robotframework_如何用Chrome模拟手机打开H5页面

    由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...

  3. 模拟SWPU邮件登录页面

    模拟SWPU邮件登录页面设计流程 一.开发工具准备 本次开发该页面时使用的开发工具为vscode—— 在下载安装完成后,需要下载各类插件——如汉化.通过浏览器打开网页插件等. 二.开发过程 首先,打开 ...

  4. 如果layer层在iframe下不居中滚动

    需要在layer前面加上parent.layer. 2.运用layer层的步骤: 1.引入1.8版本以上的jquery文件 <script type="text/javascript& ...

  5. 第一个Leap Motion测试页面 (webgl/three/leapjs/leap)

    div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 800px; background-color: #EEEE ...

  6. 让Jayrock插上翅膀（加入输入输出参数注释，测试页面有注释，下拉框可以搜索）

    继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...

  7. django 单独测试模块

    今天单独测试django的一个views文件,出现错误import的模块没有定义,这个模块是在django项目中自己编写的,解决办法: 1../manage.py shell 通过命令行进去加载,再执 ...

  8. 模拟post请求-->测试api是否可用-->再交给ios开发

    提交给iso开发前.先模拟post提交,测试返回是否正确 =============post.php文件 ios每次最少要提交5个数据, 加密串 seqno , 请求验证码 source, 设备唯一标 ...

  9. 测试页面，页面里边一次加载50张不同的图片，每张5M以上，查看浏览器的内存使用情况

    测试页面 1.需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况 2.可以10张 递增的方式测试 3.图片需要缩放,比如所有图片缩放成600*800的比例 目的 ...

随机推荐

  1. Xamarin.Android 调用手机拍照功能

    最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...

  2. spark-yarn

    1. http://blog.cloudera.com/blog/2014/05/apache-spark-resource-management-and-yarn-app-models/ 2. ht ...

  3. 使用Jexus服务器运行Asp.Net Core2.0程序

    前段时间写了篇关于.net core跨平台部署的文章.https://my.oschina.net/lichaoqiang/blog/1861977 主要讲述了,利用Nginx+CentOS+Supe ...

  4. ​​ ​​Java后端学习路线图，你真的只需要这一张！

    ​​​​ 前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java ...

  5. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. [转]Angular2-组件间数据传递的两种方式

    本文转自:https://www.cnblogs.com/longhx/p/6960288.html Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一 ...

  7. 【Core】在mvc使用EF

    引用DLL: 继续上一篇的内容我们来添加EF实体: 首先:工具> NuGet程序包管理器>程序包管理器控制台: Install-Package Microsoft.EntityFramew ...

  8. Java，第16天，属性与方法；

    public class 类名{ private double 财产 = 0://设一个财产的属性: public void 一个月工资(){ this.财产 +=4500: }//设一个方法增加财产 ...

  9. HDU6201

    transaction transaction transaction Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 132768/1 ...

  10. CSS--使用伪选择器制作箭头图标

    // 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式: HTML <section class="main&quo ...