自做弹窗，模态窗口，jq+css

自己写的弹窗，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" οnclick="DiyAlert('alert纯弹窗按钮', '1')">

 

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

 

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