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. LintCode翻转字符串问题 - python实现

    题目描述:试实现一个函数reverseWords,该函数传入参数是一个字符串,返回值是单词间做逆序调整后的字符串(只做单词顺序的调整即可). 例如:传入参数为"the sky is blue ...

  2. underscore.js源码解析【数组】

    // Array Functions // --------------- // Get the first element of an array. Passing **n** will retur ...

  3. Android开发之漫漫长途 XIX——HTTP

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  4. SQL 必知必会·笔记<16>使用视图

    1.视图 视图是虚拟的表.与包含数据的表不一样,视图只包含使用时动态检索数据的查询. 为什么使用视图 重用SQL 语句 简化复杂的SQL 操作.在编写查询后,可以方便地重用它而不必知道其基本查询细节 ...

  5. win32编程简介

    win32编程简介 复习Win32整理下知识. 为什么学习win32? 我们要编写windos程序.都离不开API. 也就是我们所说的win32程序. 所以学好win32是你能不能再windows下编 ...

  6. win10 HTTP 错误 500.21 - Internal Server Error

    错误描述: HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错 ...

  7. 获取多个checkbox的选中值

    我在这个div中添加了多个input. 拼接一下呢.最老的方法. jquery获取值: var strSel=""; $("[name='jbbm']:checked&q ...

  8. kubernetes1.13之后的kubeadm init config

    1.kubernetes1.13之后kubeadm开始GA,由于1.13的kube-proxy有bug,删除ipvs的地方总是导致kube-proxy挂掉,所以建议直接用1.13.2,这个版本解决了b ...

  9. Deep learning with Python 学习笔记（10）

    生成式深度学习 机器学习模型能够对图像.音乐和故事的统计潜在空间(latent space)进行学习,然后从这个空间中采样(sample),创造出与模型在训练数据中所见到的艺术作品具有相似特征的新作品 ...

  10. 设计模式教程（Design Patterns Tutorial）笔记之二 结构型模式（Structural Patterns）

    目录 · Decorator · What is the Decorator Design Pattern? · Sample Code · Adapter · What is the Adapter ...