<!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. js实现四叉树算法

    最近在看canvas动画方面教程,里面提到了采用四叉树检测碰撞.之前也看到过四叉树这个名词,但是一直不是很懂.于是就又找了一些四叉树方面的资料看了看,做个笔记,就算日后忘了,也可以回来看看. Quad ...

  2. Nodejs微信公众号开发

    概览 key value 项目名称 node微信公众号开发 项目描述 使用node编写接口,前后端分离获取签名数据 开发者 leinov 发布日期 2018-11-07 仓库 github地址 安装& ...

  3. flink-vs.-spark

    这段时间,开始学习Flink,并了解了Spark与Flink的区别,开始觉得Flink大有取代Spark的趋势啊,实时流始终目前是Spark的瓶颈呀,下面来一张对比图: 图片来源于:https://j ...

  4. MVC应用程序显示Flash(swf)视频

    前段时间, Insus.NET有实现<MVC使用Flash来显示图片>http://www.cnblogs.com/insus/p/3598941.html 在演示中,它也可以显示Flas ...

  5. c# 调试运行后,debug目录为空

    运行模式切换到debug,debug目录才有.点运行 按钮 边上不是有 release ,点一下,换成debug

  6. 几种流行的AJAX框架对比：Jquery，Mootools，Dojo，ExtJs，Dwr

    1:Jquery 主页:http://jquery.com/ 设计思想:简洁的方案思想,几乎所有操作都是以选择DOM元素(有强大的Selector)开始,然后是对其的操作(Chaining等特性). ...

  7. 数据定义语句（DDL语句）

    建立表 create table 表名( 字段名1 类型, 字段名2 类型, ........ 字段名n 类型): 类型有: char(n)       是一个类型,叫定长字符串,数据不够就补空格 v ...

  8. linux7 安装GitLab

    1.安装Linux虚拟机-- 安装后配置a.停止防火墙# systemctl stop firewalld.service# systemctl disable firewalld.service# ...

  9. Django中连接redis

    1. 安装 pip install django-redis 2. settings中配置 CACHES = { "default": { "BACKEND": ...

  10. 设计模式原则(6)--Open-Closed Principle(OCP)--开闭原则

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.定义: 一个软件实体应当对扩展开放,对修改关闭.即软件实体应尽量在不修改原有代码的情况下进行扩展. 2.使用场 ...