星之书笔记今天给大家分享一个弹窗功能小插件:
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
