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

最新推荐文章于 2024-07-20 15:49:14 发布

kakaxiD

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量2.7k

点赞数 2

分类专栏：个人日记文章标签： bootstrap

本文链接：https://blog.csdn.net/kakaxiD/article/details/53214964

版权

个人日记专栏收录该内容

108 篇文章 1 订阅

订阅专栏

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

需要：

<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});
    });