<!DOCTYPE html">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>模拟prompt</title>

 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

 <script>

     $(function(){

         $('#btn0').click(function(){

             var width = document.body.clientWidth+'px';

              var height = document.documentElement.clientHeight+'px';

              var p = {

                  width:$('#prompt').width(),

                  height:$('#prompt').height()

              }

              var left = ($(window).width() - p.width) / 2 + 'px';

             var top = ($(window).height() - p.height) / 2 + 'px';

             $('#middle').css({'width':width,'height':height,'position':'fixed'}).show();

             $('#prompt').css({'left':left,'top':top}).show();

             $('#output').hide();

             $(this).hide();

         })

         $('#btn1').click(function(){

             $('#ff').html($('#inp').val());

             $('#inp').val('');

             $('#output').show();

             $('#btn0').show();

             $('#middle,#prompt').hide();

         })

         $('#btn2').click(function(){

             $('#inp').val('');

             $('#btn0').show();

             $('#middle,#prompt').hide();

         })

     })

 </script>

 <style type="text/css">

     #middle{filter: alpha(opacity=50); opacity:0.3;-moz-opacity:0.3;z-index:3;background-color:#000;}

     #prompt{position:fixed;float: left;z-index:999;width:260px;background-color:#FFF;display:none;border-radius: 10px;}

     .tips{text-align: center;line-height: 40px;background: #3586bc;color: #fff;border-radius: 10px 10px 0 0;}

     .text{margin-top: 15px;}

     #inp{width: 90%;margin:0 5%;line-height: 28px;padding: 0;}

     .btns{text-align: center;padding: 15px 0;}

     #btn1,#btn2{color: #fff;padding: 5px 24px;color: #fff;border-radius: 5px;box-shadow: none;border:none;}

     #btn1{background: #3586bc;margin-right: 20px;}

     #btn2{background: #bdbdbd;}

 </style>

 <div style="z-index:1;">

     <button id="btn0">点击我输入内容</button><br />

     <span id="output" style="display:none">输入的内容为：<font color="red" id="ff" /></font></span>

 </div>

 <div id="middle"></div>

 <div id="prompt">

     <div class="tips">请输入回复内容:</div>

     <div class="text"><input type="text" id="inp"/></div>

     <div class="btns">

         <button id="btn1">确定</button>

         <button id="btn2">取消</button>

     </div>

 </div>

模拟prompt的更多相关文章

  1. 如何模拟alert/confirm/prompt实现阻断程序运行

    场景:在执行js的时候,我们希望运行到某处,进行用户交互,根据交互的内容,运行下面的程序:下面的js程序需要用的和用户交互的内容,所以,和用户交互时,后面的程序必须停止运行 方案: 1. 原生的ale ...

  2. 在PC上测试移动端网站和模拟手机浏览器的5大方

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  3. jquery自定义对话框alert、confirm和prompt

    jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...

  4. Python模拟入栈出栈操作

    目标: 1.编写菜单,提示用户操作选项(push,pop,view,quit) 2.规则:定义列表,先入栈,后出栈,后入栈,先出栈 1.模拟入栈.出栈操作 >>> list1 = [ ...

  5. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

  6. 给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动

    我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...

  7. 【Python】 Selenium 模拟浏览器 寻路

    selenium 最开始我碰到SE,是上学期期末,我们那个商务小组做田野调查时发的问卷的事情.当时在问卷星上发了个问卷,但是当时我对另外几个组员的做法颇有微词,又恰好开始学一些软件知识了,就想恶作剧( ...

  8. java，利用Selenium调用浏览器，动态模拟浏览器事件，动态获取页面信息

    1.环境搭建 jdk1.6版本:selenium 2.4版本. jdk1.8版本:selenium3.14版本. (1)selenium的jar包下载: 地址:http://selenium-rele ...

  9. Selenium WebDriver- 操作JavaScript的prompt弹窗（使用率低）

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

随机推荐

  1. 【一个小功能】点击图标/链接发起QQ临时会话

    有时候,我们需要实现在网页上点击一个QQ图标来实现QQ临时会话,这样不用添加好友,也能满足及时沟通的需求. 实现方案比较简单,只是为a标签修改href属性,代码如下 <a href=" ...

  2. UEFI+GPT与BIOS+MBR各自有什么优缺点？

    1.分区数量上,gpt好像可以支持无限个分区,不过window上只认128个,而且gpt分区不分主分区,逻辑分区,可以理解为全部都是主分区,就相当于可以允许你一个分区一个系统,128个系统了.而这是m ...

  3. Unix/Linux系统管理技术手册学习笔记——shell

    创建日期:2016/02/29 更新日期:2016/02/29 shell变量赋值时不能在等号两边留空白,否则shell会把变量名误认为是命令名 双引号括起来的变量可以进行替换(用*和?这样的文件名匹 ...

  4. 获取CheckBox的Text值

    有在网上看到一个问题,就是尝试去获取Checkbox的值.技术难度并不高,不过有时间,还是做做练习.创建一个网页: 写click事件,在CheckBox被选取时,才去获取CheckBox的Text的值 ...

  5. 2018 Google SEO 需要注意的点

    1.RankBrain 是一种机器学习系统 - 会根据用户的行为进行,对网站排名. 用户在你的网页上停留多久(用户停留时长) 多大比例的用户点击了你的网页(点击率) Note: 之前Google 开发 ...

  6. deferred对象详解

    什么是Deferred对象  defer,推迟:延期.含义就是”延迟”到未来某个点再执行. 在开发中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数 ...

  7. python MRO及c3算法

    1. 了解python2和python3类的区别 python2在2.3之前使用的是经典类, 2.3之后, 使用的是新式类 2. 经典类的MRO 树形结构的深度优先遍历 -> 树形结构遍历 cl ...

  8. webpack打包小图片时进行Base64转码

    关于base64 优点: base64就是一串字符串码表示的图片,在加载页面和js时一块加载出来,减少了加载图片时的http请求.加载一张图片时会发起一次http请求,http请求每次建立都会需要一定 ...

  9. 从零开始学习html（十二）CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  10. js 事件委托代理

    在优化网页性能的技巧当中,对DOM的优化是必不可少的.这其中就涉及到了javascript对DOM的频繁操作.比如响应用户操作的事件.一般情况下,如果是稍微初级一点的前端程序员,在拿到项目的时候,对待 ...