简单的jQuery弹框插件

最新推荐文章于 2022-04-02 09:26:02 发布

saluteNic_LU

最新推荐文章于 2022-04-02 09:26:02 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/weixin_42794596/article/details/88566239

版权

要点：

匿名函数包裹器（可搜索一下）
面向对象的编程
插件的要素（扩展jQuery本身的方法，$.extend ；给jQuery对象添加方法，对jQuery.prototype进行扩展；添加一个函数到jQuery.fn（jQuery.prototype）对象，该函数的名称就是你的插件名称）
代码部分：注意html中 a 标签的内容， js中格式的注意， css的话嫌麻烦你可以自己定义
优点：引用插件后，标签书写正确，无须再调用插件名可直接显示弹框

<!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>

saluteNic_LU

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的jQuery弹框插件

要点：匿名函数包裹器（可搜索一下）面向对象的编程插件的要素（扩展jQuery本身的方法，$.extend ；给jQuery对象添加方法，对jQuery.prototype进行扩展；添加一个函数到jQuery.fn（jQuery.prototype）对象，该函数的名称就是你的插件名称）代码部分：注意html中 a 标签的内容， js中格式的注意， css的话嫌麻烦你可以自己定义...
复制链接

扫一扫