BLOG直接代码
<html>
<head>
<title>打赏按钮</title>
<link href="css link" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="like-bnt" data-toggle="modal" data-target="#likeme">赞赏</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="likeme" tabindex="-1" role="dialog" aria-labelledby="linkmeLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="linkmeLabel">赞赏作者</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="like-ali-qr">
<p>支付宝二维码</p>
</div>
<div class="tab-pane fade" id="like-wechat-qr">
<p>微信二维码</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#like-ali-qr" data-toggle="tab"><button type="button" class="like-bnt-ali">支付宝</button></a>
<a href="#like-wechat-qr" data-toggle="tab"><button type="button" class="like-bnt-wechat">微信</button></a>
</div>
</div><!-- /.modal -->
</div>
</body>
css部分
.like-bnt {
padding: 5px 20px 5px 20px;
border-radius: 20px;
background: #ff6f6f;
color: #fff;
margin:0px 0px 20px 0px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
-webkit-overflow-scrolling: touch;
outline: 0;
width: 350px;
margin:40px auto;
overflow-x: hidden;
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 7px 7px 5px 5px;
outline: 0;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.in {
opacity: .5;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
background-color: #ff6f6f;
border-radius: 6px 6px 0px 0px;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;
color: #fff;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.like-bnt-wechat {
padding: 5px 5px 5px 5px;
border-radius: 5px;
background: #23ad44;
color: #fff;
margin:0px;
width: 70px;
}
.like-bnt-ali {
padding: 5px 5px 5px 5px;
border-radius: 5px;
background: #009fe8;
color: #fff;
margin:0px;
width: 70px;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #fff;
text-shadow: 0 1px 0 #fff;
}
.close:hover,
.close:focus {
color: #eee;
text-decoration: none;
cursor: pointer;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
clear: both;
}
/*选项卡*/
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
评论关闭