jq弹窗，开源

自己写的弹窗，jq和css不是很成熟，开源代码，请尽情拍砖。

css有两个，一个是自己写的，还有一个是bootstrap中的button.css，这个可以自由在官网下载，给个飞机票

zpyAlert.css

/*遮罩层*/.divModel {width: 100%;height: 100%;left: 0;top: 0;opacity: 0.8;background-color: #495664;z-index: 10000;position: fixed;-moz-opacity: 0.5;filter: alpha(opacity=50);}/*初始隐藏*/.hide {display: none; }/*弹出框*/.divAlert {width: 400px;height: 290px;text-align: center;position: fixed;top: 30%;left: 35%;background-color: #64BD97;z-index: 10002;-moz-opacity: 0.5;filter: alpha(opacity=50);}/*橘黄色*/.Orange {width: 400px;background-color: #64BD97;height: 200px;}/*文字层*/.TextPosition {margin: 15% auto;width: 70%;height: 20%;}/*文字样式*/.divAlertText {color: white;font-size: 18px;margin-top: 150px;font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}/*分割线*/.hr {position: relative;width: auto;border: 1px solid #E3FDFD;margin: 10px 0 0 0;}.posi {position: relative;margin: auto;}/*按钮位置*/.color {background-color: #ffffff;}/*关闭×*/.close {  position: relative;  display: inline-block;  width: 30px;  height: 30px;  overflow: hidden;  margin: 10px 0 0 80%;}.close:hover::before, .close:hover::after {  background: #34495E;}.close::before, .close::after {  content: '';  position: absolute;  height: 2px;  width: 100%;  top: 50%;  left: 0;  margin-top: -1px;  background: #E3FDFD;}.close::before {  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);  animation: myfirst 2s;  animation-iteration-count : infinite;  animation-timing-function:linear;}@keyframes myfirst {    0% {transform: rotate(45deg)}    25% {transform: rotate(135deg)}    50% {transform: rotate(225deg)}    75% {transform: rotate(315deg)}    100% {transform: rotate(405deg)}}.close::after {  -webkit-transform: rotate(135deg);  -moz-transform: rotate(135deg);  -ms-transform: rotate(135deg);  -o-transform: rotate(135deg);  transform: rotate(135deg);  animation: myfirsts 2s;  animation-iteration-count : infinite;  animation-timing-function:linear;}@keyframes myfirsts {    0% {transform: rotate(135deg)}    25% {transform: rotate(225deg)}    50% {transform: rotate(315deg)}    75% {transform: rotate(405deg)}    100% {transform: rotate(495deg)}}.close.warp::before, .close.warp::after {  border-radius: 200% 0;}.close.heavy::before, .close.heavy::after {  height: 12px;  margin-top: -6px;}

请引入jq包
zpyAlert.js

var DiyAlert = function (text, buttonNum, time) {$('body').find('.divModel').remove();$('body').find('.divAlert').remove();if (buttonNum == '1') {//整个页面的遮罩层var divModel = "<div class='divModel hide'></div>";//弹框var divAlert = "";divAlert += "<div class='divAlert hide'>" +"<span class='close warp heavy'></span>" +"<div class='hr'></div>" +"<div class='TextPosition'>" + "<span class='divAlertText'>" + text + "</span>" +"</div>" +"<div class='hr'></div>" +"<input class='button button-pill button-tiny button-border button-primary' style='margin-top: 3%;' value='确定' type='button'/>" + "</div>";if ($('body').find('.divModel').length == 0) {$('body').append(divModel);$('body').append(divAlert);$('.close').bind('click', function(){$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);});$('.button').bind('click', function(){$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);});$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);} else {$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);}} else if (buttonNum == '2') {//整个页面的遮罩层var divModel = "<div class='divModel hide'></div>";//弹框var divAlert = "";divAlert += "<div class='divAlert hide'>" +"<span class='close warp heavy'></span>" +"<div class='hr'></div>" +"<div class='TextPosition'>" + "<span class='divAlertText'>" + text + "</span>" +"</div>" +"<div class='hr'></div>" +"<input class='button button-pill button-border button-rounded button-caution button-tiny color' style='margin-top: 3%;' value='确定' type='button'/>" + "<input class='button button-pill button-border button-rounded button-highlight button-tiny color' style='margin: 3% 0 0 20px;' value='取消' type='button'/>" +"</div>";if ($('body').find('.divModel').length == 0) {$('body').append(divModel);$('body').append(divAlert);$('.close').bind('click', function(){$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);});$('.button').bind('click', function(){if ($(this).val() == '确定') {alert('你点击了确定');}if ($(this).val() == '取消') {alert('你点击了取消');}$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);});$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);} else {$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);}} else if (buttonNum == '3') {//整个页面的遮罩层var divModel = "<div class='divModel hide'></div>";//弹框var divAlert = "";divAlert += "<div class='divAlert Orange hide'>" +"<div class='hr' style='margin: 15% auto;'></div>" +"<div class='TextPosition'>" + "<span class='divAlertText'>" + text + "</span>" +"</div>" +"</div>";if ($('body').find('.divModel').length == 0) {$('body').append(divModel);$('body').append(divAlert);$('.divModel').fadeIn(300);$('.divAlert').fadeIn(300);window.setTimeout(function () {$('.divModel').fadeOut(300);$('.divAlert').fadeOut(300);}, time);} else {$('.divModel').fadeToggle(300);$('.divAlert').fadeToggle(300);}}}

调用：

DiyAlert(text, type, time)

参数解释：

text：提示文字

type：1-纯弹窗，只有确定按钮 2-类似confirme，有确认和取消按钮 3-自动消失按钮，time和3并用

time：展示时间 毫秒

图例：

<input type="button" name="触发弹窗的按钮" value="触发弹窗的按钮1" onclick="DiyAlert('alert纯弹窗按钮', '1')">

<inputtype="button"name="触发弹窗的按钮"value="触发弹窗的按钮2"onclick="DiyAlert('这里的文字是可以修改的', '2')">

<inputtype="button"name="触发弹窗的按钮"value="触发弹窗的按钮3"onclick="DiyAlert('第三种按钮弹窗，自动消失系列', '3', '2')">