html+js弹窗功能

今天给大家分享一个弹窗功能小插件:

9e99fc8a5898c856660d44278abb826.png

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="allf.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/option.js"></script>
<script type="text/javascript">
$(function(){

	$(".dialog_link a").click(function(){
		$(this).DialogShow({
			'id': 'somedialog',  //传入id,可以控制样式
			'dialogFx': '1',     //传入显示和隐藏的参数
		});
	});
	$(".dialog__overlay").click(function(){
		$(this).DialogShow({
			'id': 'somedialog',
			'dialogFx': '0',
		});
	});
	$(".dialog__overlay").click(function(){
		$(this).DialogShow({
			'id': 'somedialog',
			'dialogFx': '0',
		});
	});
	$(".action").click(function(){
		$(this).DialogShow({
			'id': 'somedialog',
			'dialogFx': '0',
		});
	});
})
</script>
<title>无标题文档</title>
</head>
<body>
<div class="dialog_link">
	<a href="#">点我弹出</a>
</div>
<div id="somedialog" class="dialog">
	<div class="dialog__overlay"></div>
	<div class="dialog__content">
		<h2><strong>Hello</strong>, I'm a dialog box</h2>
	<div>
		<button class="action" data-dialog-close>Close</button>
	</div>
</div>
</div>
</body>
</html>

option.js代码

var DialogFx=function(ele,opt){this.$element=ele,this.defaults={'id':'somedialog','dialogFx':'0',},this.options=$.extend({},this.defaults,opt)}
DialogFx.prototype={Show:function(){$("#"+this.options.id).removeClass("dialog--close");$("#"+this.options.id).addClass("dialog--open");},Hidden:function(){$("#"+this.options.id).removeClass("dialog--open");$("#"+this.options.id).addClass("dialog--close");}}
$.fn.DialogShow=function(options){var dialogFx=new DialogFx(this,options);if(options.dialogFx=="0"){return dialogFx.Hidden();}else{return dialogFx.Show();}}

allf.css代码

可以根据你自己的需要来写。

这里提供一下我这个博客使用的:http://blog.wien.ren/themes/BookStars/public/assets/css/allf.css

Comments 0

0.163145s