jQuery弹框插件使用方法详解

本文实例为大家分享了jQuery弹框插件使用的具体代码,供大家参考,具体内容如下

要点 :

1、匿名函数包裹器(可搜索一下)

2、面向对象的编程

3、插件的要素(扩展jQuery本身的方法,$.extend ; 给jQuery对象添加方法,对jQuery.prototype进行扩展 ;添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称)

4、代码部分: 注意html中 a 标签的内容 , js中格式的注意 , css的话嫌麻烦你可以自己定义

5、优点: 引用插件 后 , 标签书写正确 , 无须再调用插件名可直接显示弹框

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>用户管理-员工管理</title>

<!-- <link rel="stylesheet" href="../css/main-style.css" >

<link rel="stylesheet" href="../css/part-style.css" >

<style type="text/css">

.input-new-content>.input-list>select{

width: 380px;

height: 45px;

border: 1px solid #ddd;

border-radius: 5px;

margin-top: 13px;

text-indent: 10px;

}

</style> -->

</head>

<body>

<!-- container-part -->

<div id="container-part">

<!-- part-display-content -->

<div id="display-content">

<a href="#changeable-box" type="open">click me</a>

</div>

</div>

<div id="changeable-box" style="display: none">

<div class="change-password-content">

<div class="title-to-change">

<p>标题</p>

<a class="close-this-content" href="#changeable-box" type="close"></a>

</div>

<div class="input-new-content">

<div class="input-list">

<select class="" name="">

<option value=""></option>

</select>

</div>

<div class="input-list">

<input type="text" name="" value="">

</div>

<div class="input-list">

<input type="text" name="" value="" placeholder="确认密码">

</div>

</div>

<div class="choose-newPassword-status">

<a class="save-newPassword" href="#changeable-box" type="close">保存</a>

<a class="cancel-changePassword" href="#changeable-box" type="close">取消</a>

</div>

</div>

</div>

<!-- <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> jquery引用-->

<script type="text/javascript">

;(function($ , window , document , undefined){

$.jModal = function(ele , opt) {

var target;

this.$body = $('body');

this.options = $.extend({} , $.jModal.defaults , opt);

this.blocker = $('<div class="shadowblock"></div>');

target = ele.attr('href');

this.$elm = $(target)

if (ele.attr('type') == 'open') {

this.open();

}

else if (ele.attr('type') == 'close'){

this.hide();

}

else {

return false

}

}

$.jModal.prototype = {

open: function(){

this.$elm.css({

position: 'fixed',

width: '440px',

height: 'auto',

fontSize: 'var(--base-font-size)',

color: '#515355',

background: '#fff',

boxShadow: '0 0 2px 1px #eee',

top: '50%',

left: '50%',

transform: 'translate(-50% , -50%)',

zIndex: 3

});

if (this.options.showSpinner) {

this.showSpinner()

}

this.show()

},

// 遮罩显示

showSpinner: function() {

this.blocker.css({

position: 'fixed',

width: '9999vw',

height: '9999vh',

left: 0,

top: 0,

background: '#000',

opacity: .7,

zIndex: 2,

})

this.$body.append(this.blocker);

},

// 弹框显示

show: function() {

this.$elm.show()

},

// 隐藏弹框 & 移除遮罩

hide: function() {

this.$elm.hide()

$('.shadowblock').remove();

}

}

$.jModal.defaults = {

showSpinner: false ,

}

$.fn.jModal = function(options) {

new $.jModal(this , options)

return this

}

$(document).on('click' , 'a' , function(event){

event.preventDefault()

$(this).jModal()

})

})(jQuery , window , document)

</script>

</body>

</html>

以上是 jQuery弹框插件使用方法详解 的全部内容, 来源链接: utcz.com/z/323241.html

回到顶部