弹层插件
Posted MingL520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹层插件相关的知识，希望对你有一定的参考价值。
css：
/*提示弹层*/
*{padding:0;margin: 0;}
.tuceng2{
width: 300px;height:auto;background-color: rgb(255, 255, 255);position: fixed;left: 50%;top: 300px;transform:translate(-50%,-50%);z-index:99999;box-shadow: 0 0 4px 1px rgba(7,0,1,0.5);border: 1px solid rgb(196, 197, 199);z-index:100000000000;
}
.msg{
display:block;width:280px;height:40px;line-height:40px;border-bottom:1px solid #d5d5d5;background:#F0F0F0;font-size:14px;color:#333;padding-left:20px;
}
.inputmsg{
display: block;padding: 52px 0;text-align: center;width: 250px;margin: 0 auto;line-height: 24px;font-size: 14px;
}
/*END*/
/*确定、取消弹层*/
/* --------------------------------
Primary style
-------------------------------- */
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.img-replace {
/* replace text with an image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
/* --------------------------------
Main components
-------------------------------- */
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index:100000;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 90%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cd-popup-container p {
padding: 3em 1em;
line-height:40px;
font-size:18px;
}
.cd-popup-container .cd-buttons:after {
content: "";
display: table;
clear: both;
}
.cd-popup-container .cd-buttons li {
float: left;
width: 50%;
margin-bottom:20px;
}
.cd-popup-container .cd-buttons a {
display: block;
height: 48px;
line-height: 48px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
border-radius:.25rem;
width:80px;
}
.cd-popup-container .cd-buttons li:first-child a {
background: #fc7169;
margin-left:88px;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
background-color: #fc8982;
}
.cd-popup-container .cd-buttons li:last-child a {
background: #b6bece;
margin-left:20px;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
background-color: #c5ccd8;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
content: ‘‘;
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
.cd-popup-container {
margin: 16em auto;
}
}
/*END*/
js：
//弹层消失，可指定弹层类型（如：提示，警告……），弹层内容（如：姓名不能为空……），弹层消失时间（如：2000（代表2秒后消失））
function AlterMsg(msg, con, k) {
var html = ‘‘;
html += ‘<div class="tuceng2">‘;
html += ‘<p class="msg">‘ + msg + ‘</p>‘;
html += ‘<p class="inputmsg">‘+con+‘</p>‘;
html+=‘</div>‘;
$("body").append(html);
setTimeout(function () { $(".tuceng2").remove() }, k);
}
//弹层消失，默认弹层类型为“提示”，消失时间为2秒
function AlterMsg_Default(con) {
var html = ‘‘;
html += ‘<div class="tuceng2">‘;
html += ‘<p class="msg">提示</p>‘;
html += ‘<p class="inputmsg">‘ + con + ‘</p>‘;
html += ‘</div>‘;
$("body").append(html);
setTimeout(function () { $(".tuceng2").remove() }, 2000);
}
//确定、取消弹层，可指定点击确定后的执行事件（方法），可指定点击取消后的执行事件（方法）
function AlterMsg_Confirm_Cancel(msg, confirmfunname,cancelfunname) {
if (confirmfunname == undefined || confirmfunname == null) {
confirmfunname = "";
}
if (cancelfunname == undefined || cancelfunname == null) {
cancelfunname = "";
}
var html=‘‘;
html += ‘<div class="cd-popup is-visible" role="alert">‘;
html += ‘<div class="cd-popup-container">‘;
html+=‘<p>‘+msg+‘</p>‘;
html += ‘<ul class="cd-buttons">‘;
if (confirmfunname != "") {
html += "<li><a href=\"javascript:;\" title=\"确定\" onclick=\"" + confirmfunname + "\">确定</a></li>";
}
else {
html += ‘<li><a href="javascript:;" class="confirm_btn" title="确定">确定</a></li>‘;
}
if (cancelfunname != "") {
html += "<li><a href=\"javascript:;\" title=\"取消\" onclick=\"" + cancelfunname + "\">取消</a></li>";
}
else {
html += ‘<li><a href="javascript:;" class="cancel_btn" title="取消">取消</a></li>‘;
}
html+=‘</ul>‘;
html += ‘<a href="javascript:;" class="cd-popup-close img-replace cancel_btn" title="关闭">Close</a>‘;
html+=‘</div>‘;
html += ‘</div>‘;
$("body").append(html);
}
//用于确定、取消提示框
//取消、关闭弹层
$(document).on(‘click‘, ‘.cancel_btn‘, function (event) {
$(".cd-popup").remove();
});
HTML：
（1）：有提示语，几秒后消失
<button class="abc">弹层</button>
<script>
$(".abc").click(function(){
AlterMsg("题目", "干嘛", 1000);
})
</script>
（2）：点击确定，取消
<button class="abc">弹层</button>
<script>
$(".abc").click(function(){
AlterMsg_Confirm_Cancel("怎么了", "ale()","clea()")
})
</script>
以上是关于弹层插件的主要内容，如果未能解决你的问题，请参考以下文章