<!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. http缓存详解，http缓存推荐方案

    前言 通过本文,你将了解到http缓存机制是怎样的,no-cache到底有没有缓存,地址栏回车,F5,ctrl+F5的区别,以及当下较为推荐的缓存方案等. 自从和前端组的同事一起整了个前端扫盲计划,想 ...

  2. Log4j的邮件发送类SMTPAppender改造

    在开发过程中,我们有时需要将重要的错误日志通过邮件发送给相关的责任人,这样能即时发现错误,即时解决.如使用Log4J,一般会做如下配置: log4j.rootLogger = debug,mail # ...

  3. [C#]记一次解析XML转对象的笔记

    项目中调用第三方API,返回格式是XML字符串,需要将XML反序列化为对象,格式如下: <?xml version="1.0"?> <Response xmlns ...

  4. ASP.NET开发，从二层至三层，至面向对象 (3)

    继续上一篇<ASP.NET开发,从二层至三层,至面向对象 (2)>http://www.cnblogs.com/insus/p/3825805.html .我们学会了怎样创建对象,把Biz ...

  5. @Styles的nameSpace是什么

    先参考下面一篇<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.html,Insus.NET创建了一个空的MVC应用程序. 在创建 ...

  6. Infopath 2010 接收SQL Server数据

    Infopath2010为我们提供了多种接收数据的方式,今天我来讲讲里面其中的一种直接读取SQL Server数据库表数据方法(高阶者的下面可以略省,只针对入门者). 1.选择数据库(SQL) 2.选 ...

  7. 图解 SQL-Server新建作业

    1,启动SQL Server代理(SQL Server Agent),如下图所示: 2,右击作业--新建作业--常规--填写作业名称 3,步骤--新建 4,步骤名称--数据库名--要执行的存储过程名 ...

  8. c#FTP应用---windows iis

    一.什么是FTP FTP(File Transfer Protocol)是TCP/IP网络上两台计算机传送文件的协议,使得主机间可以共享文件. 二.搭建前期准备 1.首先打开控制面板找到“程序”点击打 ...

  9. Random类的常用方法

    1.nextBoolean(): 随机返回true或false 2.nextInt(int bound): 随机返回0到bound之间的整数(不包括bound) 如:nextInt(10)返回0-9之 ...

  10. SpingBoot —— 多线程

    Spring 通过任务执行器(TaskExecutor)来实现多线程和并发编程.使用ThreadPoolTaskExecutor可实现一个基于线程池的TaskExecutor.而实际开发中任务一般是非 ...