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. 关于resin的illegal utf8 encoding at (190)解决方式

    最近在项目开发中,出现了编码异常,内容如下:- illegal utf8 encoding at (190)com.caucho.jsp.JspParseException: illegal utf8 ...

  2. oracle笔记--查询10条之后记录的数据

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 由于之前一直在用mysql 对于oracle 的一些语法不太了解,自己有一次去面试让写一个oracle ...

  3. php网页上传文件到Ubuntu服务器（input type=fire）- 赖大大

    直接上代码: <form enctype="multipart/form-data" method="post" action=""& ...

  4. 高性能、高可用性Socket通讯库介绍 - 采用完成端口、历时多年调优！（附文件传输程序）

    前言 本人从事编程开发十余年,因为工作关系,很早就接触socket通讯编程.常言道:人在压力下,才可能出非凡的成果.我从事的几个项目都涉及到通讯,为我研究通讯提供了平台,也带来了动力.处理socket ...

  5. idea中切换svn地址不起作用

    由于公司换地儿,svn地址也跟着变化. 期望用idea能修改svn的地址,不至于重新checkout.网上很多说修改 vcs -> Subversion -> Relocate .把原来的 ...

  6. python3爬虫——下载unsplash美图到本地

    最近发现一个网站www.unsplash.com ( 没有广告费哈,纯粹觉得不错 ),网页做得很美观,上面也都是一些免费的摄影照片,觉得很好看,就决定利用蹩脚的技能写个爬虫下载图片. 先随意感受一下这 ...

  7. 实验吧 php

    Once More 题目地址:http://ctf5.shiyanbar.com/web/more.php 打开直接有源码: <?php if (isset ($_GET['password'] ...

  8. JavaWeb学习 (二十八)————文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  9. Java设计模式学习记录-组合模式

    前言 今天要介绍的设计模式是组合模式,组合模式也是结构型设计模式的一种,它主要体现了整体与部分的关系,其典型的应用就是树形结构.组合是一组对象,其中的对象可能包含一个其他对象,也可能包含一组其他对象. ...

  10. rsync算法原理和工作流程分析

    本文通过示例详细分析rsync算法原理和rsync的工作流程,是对rsync官方技术报告和官方推荐文章的解释.本文不会介绍如何使用rsync命令(见rsync基本用法),而是详细解释它如何实现高效的增 ...