模拟prompt 

 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>

 

posted @ 2017-01-11 16:53  曦雨幽兰  阅读(522)  评论(0)    收藏  举报