jQuery彈框外掛使用方法詳解
阿新 • • 發佈：2020-05-27
本文例項為大家分享了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,document)
</script>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。