js 基于面向对象编程

最新推荐文章于 2024-02-28 23:59:43 发布

godnan_kk

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量453

点赞数

分类专栏： js面向对象编程文章标签： js面向对象

本文链接：https://blog.csdn.net/weixin_38098195/article/details/80481609

版权

js面向对象编程专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" href="css/elens.pop.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/iconfont.js" ></script>
</head>
<body>
<div id='btn'>点击显示模态框</div>
<div class="elens_wrap_modal" id='modal'>
<div class="modal_content">
<div class="modal_head">
<div class="modal_title">
<h4>Permissions</h4>
</div>
<div class="modal_close">
<i class="iconfont icon-close"></i>
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.
</div>
<div class="btn_group">
<div class='make_sure'>确定</div>
<div class='cancle'>取消</div>
</div>
</div>
</div>

</body>
<script>

</script>
<script>
$(function(){
var modal = new popModal("modal");
modal.sure(function(){
alert("确定");
});
$("#btn").on("click",function(){
modal.show();
modal.sure(function(){
alert("点击确定回调")
})
})
})
/*
* 实例对象传入模态框id
* 共有3个方法
* show显示模态框
* hide关闭模态框
* sure为确定关闭模态框，可传入回调方法。
*/
function popModal(id){
var _this = this;
var $elem = $("#"+id);
var _callback;
this.show = function(){
$elem.find(".icon-close").off();
$elem.find(".cancle").off();
$elem.show();
$elem.find(".icon-close").on("click",function(){
_this.hide();
});
$elem.find(".cancle").on('click',function(){
_this.hide();
});
};
this.hide = function(callback){
$elem.hide();
callback&&callback();
};
this.sure = function(callback){
_callback = arguments[0];
var func = callback;
$elem.find(".make_sure").off();
$elem.find(".make_sure").on("click",function(func){
_this.hide(_callback);
})

}
}
</script>
</html>

封装成弹窗组件，可以重复调用；