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. C#开源项目大全

    C#开源项目大全   商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Ph ...

  2. 通过GitHub和GoDaddy搭建静态个人博客

    一.创建GitHub个人主页 通过GitHub创建个人博客的好处:无广告,因为页面代码全是你自己写的:免费,不用买主机:装X:设计和编码练习. 1. 在GitHub上创建一个新的repository, ...

  3. Spring的Java配置方式—@Configuration和@Bean实现Java配置

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.@Configuration 和 @BeanSpring的Java配置方式是通过 @Configuration 和 @Be ...

  4. 为什么byte的取值范围是-128到127

    一个byte由八个位组成,如00000000,其中,符号位+数值位,前7位表示数值,第8位是符号位(0为正,1为负).这样+1就是00000001,-1就是10000001.最大的正数就是0 1111 ...

  5. 来自于一个问题的回答对自己的反思 php怎么发送邮件?发送邮件插件PHPMailer

    前言: 昨天用手机无意点了一下博问,看见了一个朋友问了一个关于php发邮件不能添加发件人名称的问题,试着看了一下代码,觉得自己发现了问题所在,谁知道只是一知半解没有真正发现问题所在,看来有一段时间没有 ...

  6. 鸟哥的Linux私房菜：基础学习篇 —— 第五章笔记

    1.Linux一般将文件可存取的身份分为三个类 别,分别是 owner/group/others,且三种身份各有 read/write/execute 等权限.其中 root 的权限最高. 2.在我们 ...

  7. httpd配置文件httpd.conf规则说明和一些基本指令

    apache httpd系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 本文主要介绍的是httpd的配置文件,包括一些最基本的指令.配置规 ...

  8. 菜鸟入门【ASP.NET Core】10：Cookie-based认证实现

    准备工作 新建MVC项目,然后用VSCode打开 dotnet new mvc --name MvcCookieAuthSample 在Controllers文件夹下新建AdminController ...

  9. SqlHelper 1.0

    SqlHelper类,可以简化对数据库的操作. 将程序中需要经常用到的数据库操作,如:连接字符串.对数据的增.删.改.查封装成“SqlHelper”类中的静态属性,方便在程序各部分进行调用. 增(in ...

  10. Netty网络聊天(一) 聊天室实战

    首发地址; Netty网络聊天(一) 聊天室实战 之前做过一个IM的项目,里面涉及了基本的聊天功能,所以注意这系列的文章不是练习,不含基础和逐步学习的部分,直接开始实战和思想引导,基础部分需要额外的去 ...