像bootstrap模态框一样的弹出框怎么写？

本人菜鸟一枚 问这个问那个，做出来了 = =！记录下！分享给大家，给有和我一样需要的！！

需要：

<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-2.1.1.js"></script> <script src="js/bootstrap.min.js"></script>

样式代码：

/*弹出窗口*/ .Popup{position: fixed;top: 0;right: 0; bottom: 0; left: 0;z-index: 1050;opacity: 1;color: #333;display: none;} .PopupShow{display: block;} .Popup-dialog{width: 600px;margin: 0 auto;position: fixed;top: -1000px;left: 0;right: 0; /*left: 50%;或者这个加下面的margin也可以居中*/ /*margin-left: -300px;*/ } .Popup-content{background-color:#fff;border-radius: 6px;border: 1px solid rgba(0,0,0,.2);box-shadow: 0 5px 15px rgba(0,0,0,.5);} .Popup-header{padding: 15px;border-bottom: 1px solid #e5e5e5;} .Popup-body{padding: 15px;} .Popup-footer{padding: 15px;border-top: 1px solid #e5e5e5;text-align: right;} .Popup-backdrop{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;opacity: .5;display: none;} .Popup_fade{display: none;} .Popup_in{opacity: 1;display: block;} .Popup_in2{opacity: .5;display: block;}

这个是点击按钮：

<button id="popup" class="btn btn-primary" style="clear: both;">弹出按钮</button>

这个是弹出框的HTML代码

<div class="Popup " > <div class="Popup-dialog " > <div class="Popup-content"> <div class="Popup-header"> <button class="close">x</button> <h4>现金结账</h4> </div> <div class="Popup-body"> <div>需要支付：<span ></span></div> <div>实际支付：<input type="text" /></div> <div>找零：<span></span></div> </div> <div class="Popup-footer"> <button type="submit" name="button" value="现金支付" class="btn btn-primary" >确认支付</button> </div> </div> </div> </div> /*这个是灰色遮罩*/ <div class="Popup-backdrop" ></div>

下面的JS代码

function popup(){ $(".Popup").removeClass("Popup_in").addClass("Popup_fade"); $(".Popup-backdrop").removeClass("Popup_in2").removeClass("Popup_fade").addClass("Popup_fade"); } $(".Popup-header").on("click",".close",function(){//这个是关闭弹出框 $(".Popup-dialog").animate({top:-1000}); setTimeout("popup()",300) }); $("#popup").click(function(){//点击按钮弹出 $(".Popup-backdrop").toggleClass("Popup_in2"); $(".Popup").toggleClass("Popup_in"); $(".Popup-dialog").animate({top:30}); });

效果：