1 <!DOCTYPE html">
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>模拟prompt</title>
4 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
5 <script>
6 $(function(){
7 $('#btn0').click(function(){
8 var width = document.body.clientWidth+'px';
9 var height = document.documentElement.clientHeight+'px';
10
11 var p = {
12 width:$('#prompt').width(),
13 height:$('#prompt').height()
14 }
15
16 var left = ($(window).width() - p.width) / 2 + 'px';
17 var top = ($(window).height() - p.height) / 2 + 'px';
18
19 $('#middle').css({'width':width,'height':height,'position':'fixed'}).show();
20 $('#prompt').css({'left':left,'top':top}).show();
21 $('#output').hide();
22 $(this).hide();
23 })
24
25 $('#btn1').click(function(){
26 $('#ff').html($('#inp').val());
27 $('#inp').val('');
28 $('#output').show();
29 $('#btn0').show();
30 $('#middle,#prompt').hide();
31 })
32
33 $('#btn2').click(function(){
34 $('#inp').val('');
35 $('#btn0').show();
36 $('#middle,#prompt').hide();
37 })
38 })
39 </script>
40 <style type="text/css">
41 #middle{filter: alpha(opacity=50); opacity:0.3;-moz-opacity:0.3;z-index:3;background-color:#000;}
42 #prompt{position:fixed;float: left;z-index:999;width:260px;background-color:#FFF;display:none;border-radius: 10px;}
43 .tips{text-align: center;line-height: 40px;background: #3586bc;color: #fff;border-radius: 10px 10px 0 0;}
44 .text{margin-top: 15px;}
45 #inp{width: 90%;margin:0 5%;line-height: 28px;padding: 0;}
46 .btns{text-align: center;padding: 15px 0;}
47 #btn1,#btn2{color: #fff;padding: 5px 24px;color: #fff;border-radius: 5px;box-shadow: none;border:none;}
48 #btn1{background: #3586bc;margin-right: 20px;}
49 #btn2{background: #bdbdbd;}
50 </style>
51
52 <div style="z-index:1;">
53 <button id="btn0">点击我输入内容</button><br />
54 <span id="output" style="display:none">输入的内容为：<font color="red" id="ff" /></font></span>
55 </div>
56 <div id="middle"></div>
57 <div id="prompt">
58 <div class="tips">请输入回复内容:</div>
59 <div class="text"><input type="text" id="inp"/></div>
60 <div class="btns">
61 <button id="btn1">确定</button>
62 <button id="btn2">取消</button>
63 </div>
64 </div>
