master

分支 (1)

管理

管理

master

zuoye
/
弹窗插件.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html {
				margin: 0px;
				padding: 0px;
				height: 0px;
				position: relative;
				top: 0px;
			}

			body {
				position: relative;
				margin: 0px;
				top: -16px;
			}

			div {
				width: 200px;
				height: 100px;
				background-color: green;
				/*display: none;*/
			}

			ul li {
				list-style: none;
				position: absolute;
			}

			.register {
				top: 40px;
			}
		</style>
	</head>

	<body>

		<!--<div id="" >
			注册成功
		</div>-->
		<ul>
			<li class="login">登录</li>
			<li class="register">注册</li>
		</ul>
	</body>

</html>
<script src="jquery.js"></script>
<script src="弹窗.js"></script>
<script>

	//方法一

	$.fn.extend({
		popup: function(text) {
		$(this).on("click", function() {
				var sec = document.createElement("section")
				$(sec).css({
					"width": "100%",
					"height": "100vh",
					"background": "gray",
					"opacity": "0.5",
					"z-index": "10",
					"position": "absolute",
				})
				document.body.append(sec)
				var div = document.createElement("div")
				$(div).css({
					"width": "200px",
					"height": "100px",
					"border": "1px solid red",
					"z-index": "20",
					"position": "absolute",
					"top": "300px",
					"left":"45%",
					"text-align": "center",
					"line-height":"100px"
				}).text(text)
				document.body.append(div)

				console.log($("div").length)
				var btn = document.createElement("button")
				div.append(btn)
				$(btn).css({
					"width": "20px",
					"height": "20px",
					"background": "red",
					"color": "#ffffff",
					"z-index": "30",
					"position": "absolute",
					"right": "0px",
				}).text("x")
				$(btn).on("click", function() {

					$(div).css("display", "none")
					$(sec).css("display", "none")
				})
			})
		}

	})

////方法二
//
//$.fn.extend({
//	popup: function(text){
//		$(this).on("click",function  () {
//			alert(text)
//		})
//	}
//})
	$("ul .login").popup("登录成功")
	$("ul .register").popup('注册成功')
</script>