<!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. Linux 下面解压.tar.gz 和.gz文件解压的方式

    Linux 下面解压.tar.gz 和.gz文件解压的方式 两种解压方式 1 .tar.gz 使用tar命令进行解压 tar -zxvf java.tar.gz 解压到指定的文件夹 tar -zxvf ...

  2. UVa 12657 Boxes in a Line（数组模拟双链表）

    题目链接 /* 问题 将一排盒子经过一系列的操作后,计算并输出奇数位置上的盒子标号之和 解题思路 由于数据范围很大,直接数组模拟会超时,所以采用数组模拟的链表,left[i]和right[i]分别表示 ...

  3. Netty 接受请求过程源码分析 (基于4.1.23)

    前言 在前文中,我们分析了服务器是如何启动的.而服务器启动后肯定是要接受客户端请求并返回客户端想要的信息的,否则要你服务器干啥子呢?所以,我们今天就分析分析 Netty 在启动之后是如何接受客户端请求 ...

  4. mysql 创建数据库,添加用户,用户授权

    一.创建mysql数据库 1.创建数据库语法 --创建名称为"testdb"数据库,并设定编码集为utf8 CREATE DATABASE IF NOT EXISTS testdb ...

  5. git 使用 VisualStudio 比较分支更改

    有时候需要比较两个分支的不同,这时如果提交到 github ,那么默认就可以看到.但是这时因为没有ide的高亮或者其他的功能,看起来觉得不好 默认的 VisualStudio 比较文件比 github ...

  6. 转 C#反编译后的一些错误改正

    Xenocode反编译及代码整理记录1.Xenocode中设置输出数字为十进制 2.输出后中文文本为\uXXXX,可采用编码工具转成中文 3.new ()改成null; 4.反编译后代码中嵌套数组ne ...

  7. Redis简介及应用场景

    一丶Redis介绍 Redis是一个开源的 key—value型 单线程 数据库,支持string.list.set.zset和hash类型数据. 默认端口:6379 默认数据库数量:16 二.优点: ...

  8. Binary Tree Traversals（HDU1710）二叉树的简单应用

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  9. linux_shell_数组

    shell数组类似与C语言,数组下标由0开始编号.想要获取数组中的元素要利用下标. 1.首先定义数组 在shell中,用括号来表示数组,数组元素用“空格”符号分割开.列: name=("d& ...

  10. require.js的基本概念及使用流程（1）

    今天,我们来说一说requireJS的基本概念,在下一篇随笔中我们再去讨论讨论requireJS的使用步骤 这一篇都是一些概念性比较强的东西,希望大家擦亮自己的钛合金狗眼好好看看概念,好吧 首先,什么 ...