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 $('#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>