<!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. SAP HANA项目过程中优化分析以及可行性验证

    在项目开发过程中,经常会遇到HANA模型运行效率的问题: 以我们项目为例,HANA平台要求模型运行时间不能超过10秒,但是在大数量和计算逻辑复杂的情况下(例如:ERP中的BKPF和BSEG量表的年数据 ...

  2. 3D转弯保护区长啥样？

    3D转弯保护区长啥样? 2015-12-06 刘崇军 风螺旋线 在课本中.规范中看到的转弯保护区一直是平面化的样子.我们知道副区是由主区外扩而成,但具体怎样精确外扩无从知晓:我们知道主区边界至副区边界 ...

  3. JavaWeb学习路线图

    基本把JavaWeb的学了有一半了,在网上找了个学习路线图,供参考.

  4. [转]SQL Server 中WITH (NOLOCK)浅析

    本文转自:https://www.cnblogs.com/kerrycode/p/3946268.html 概念介绍 开发人员喜欢在SQL脚本中使用WITH(NOLOCK), WITH(NOLOCK) ...

  5. jQuery显示SQL存储过程自定义异常信息

    学习MVC应用开发,改变了Insus.NET以前ASP.NET的开发习惯,以前开发均是服务器端,而现在使用jQuery的Ajax在实现.想到与考虑了很多问题,也遇上很多问题,一些解决了,一些还留下,望 ...

  6. BloomFilter布隆过滤器

    BloomFilter 简介 当一个元素被加入集合时,通过K个散列函数将这个元素映射成一个位数组中的K个点,把它们置为1.检索时,我们只要看看这些点是不是都是1就(大约)知道集合中有没有它了:如果这些 ...

  7. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  8. [javaEE] Servlet的调用过程和生命周期

    在http协议的请求头中获取到要访问的资源,查找web.xml文件找到对应的servelet Sevlet的生命周期 Servlet在第一次被访问的时候,服务器创建出Servlet对象,创建出对象以后 ...

  9. [android] 轮播图-滑动图片标题焦点

    谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 ...

  10. JAVA设计模式详解（四）----------单例模式

    上一章我们学习了装饰者模式,这章LZ带给大家的是单例模式. 首先单例模式是用来干嘛的?它是用来实例化一个独一无二的对象!那这有什么用处?有一些对象我们只需要一个,比如缓存,线程池等.而事实上,这类对象 ...