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. Android Studio中设置一个按钮的不同点击触发事件

    my_day_model = (RelativeLayout) v.findViewById(R.id.my_day_model);my_day_pic = (ImageView) v.findVie ...

  2. 网络IP地址

    IP地址分类 A类网络的IP地址范围为1.0.0.1-127.255.255.254: B类网络的IP地址范围为:128.1.0.1-191.255.255.254: C类网络的IP地址范围为:192 ...

  3. Django之破解数独

      数独是一项快乐的益智游戏,起源于18世纪瑞士的一种数学游戏.解答者需要运用纸.笔进行演算,需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一行.每一列.每一个粗线宫(3*3)内的 ...

  4. C#基础知识回顾-- 反射（4）

    从程序集获得类型 先说点题外话,现在技术真的发展太快了.我这边还很多东西半生不熟 呢,那边又出现了好多有趣的新东西让你眼红不已.学还是不学这还真是 个问题.Node.js .bootstrap,我最近 ...

  5. elasticsearch6.7 01.入门指南（3）

    4.Modifying Your Data(修改数据) Elasticsearch 提供了近实时的操纵数据和搜索的能力.默认情况下,从索引/更新/删除数据到在搜索结果中显示数据会有 1 秒的延迟(刷新 ...

  6. 【Mysql】mysql乐观锁总结和实践

    乐观锁介绍: 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据一般情况下不会造成冲突,所以在数据进行提交更新的时候,才会正式对数据的冲突与否进行检测,如果发现冲突 ...

  7. Placement of class definition and prototype

    When I create a function, I can put the code for it after main if I put the prototype above main. Fo ...

  8. lfs（systemd版本）学习笔记-第2页

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd)学习笔记-第1页 的地址:https://www.cnblogs.com/renren-study-no ...

  9. 洛谷P2447 [SDOI2010]外星千足虫(异或方程组)

    题意 题目链接 Sol 异或高斯消元的板子题. bitset优化一下,复杂度\(O(\frac{nm}{32})\) 找最优解可以考虑高斯消元的过程,因为异或的特殊性质,每次向下找的时候找到第一个1然 ...

  10. Python中元组相关知识

    下面给大家介绍以下元组的相关知识: ·元组可以看成是一个不可更改的list 1.元组的创建 # 创建空元祖 t = () print(type(t)) # 创建只有一个值的元组 # 观察可知元组中如果 ...