runsly 技术分享 2023-05-11

JQ/JS的弹出框，ifream框[图]

js的弹出框操作类文件，以前用的是用函数做的，但是数据很难量大，维护困难，就写了一个操作类文件，个大家一个思路而已。

//如做一个弹出框，停留2秒
warn('如做一个弹出框，停留2秒');

//如做ifream
warn('/index.html');

软件截图

function warn(s,f){
	var w=new Warn();
	if(/^\/|^http/.test(s)){
		f&amp;&amp;(w.app=f);
		w.load(s);
	}else if(typeof s =='string'){
		w.alert(s);
	}
	return w;
}
function Warn() {
	window.WARN = this;
	this.bg = false;
	this.css = {};
	this.runing = 1;
	this.title = '';
	this.html = '';
	this.width = 0;
	this.height = 0;
	this.auto = true;
	this.ship = 350;
	this.onload = function() {};
	this.run = function(html) {
		if(html)this.html=html;
		$('#warn_bg,#warn').remove();
		$('body').append(this.outerHTML);
		$('#warn_title').html(this.title || '温馨提示');
		$('#warn_body').html(this.html).css(this.css);
		$('#warn').css('width',this.width||350);
		if(this.height)$('#warn_body').css('height',this.height);
		$('#warn_head').unbind().mousedown(function(e) {
			var offset,dissX,dissY,offsetY,offsetX,left,top;
			offsetY = parseFloat($('#warn').css('top')) - e.clientY;
			offsetX = parseFloat($('#warn').css('left')) - e.clientX;
			dissY = WARN.clientHeight() - $('#warn').height();
			dissX = $(window).width() - $('#warn').width();
			$(document).mousemove(function(e) {
				top = offsetY + e.clientY;
				left = offsetX + e.clientX;
				if (top &lt; 0) top = 0;
				if (left &lt; 0) left = 0;
				if (top &gt; dissY) top = dissY;
				if (left &gt; dissX) left = dissX;
				$('#warn').css({top: top,left: left})
			});
		});
		$(document).mouseup(function() {
			$(document).unbind('mousemove')
		});
		$(window).bind('resize',function(){
			WARN.resize();
		});
		$(window).keyup(function(e) {
			if (e.which == 27) WARN.closing()
		});
		$('#warn').animate({opacity: 1},600);
		if (this.bg) {
			$('body').append('<div id="warn_bg"></div>');
			$('#warn_bg').css('height',$(document).height()).animate({opacity: 0.2},800);
		}
		this.onload();
		this.resize();		
	}
	this.resize = function() {
		$('#warn').css({top: (this.clientHeight() - $('#warn').height()) / 2,left: ($(window).width() - $('#warn').width()) / 2},700)
	};
	this.stristr = function(A,B) {
		return A &amp;&amp; B &amp;&amp; trim(B.toLowerCase()) == trim(A.toLowerCase())
	};
	this.getCode=function() {
		var val = '',str = 'ABCDEFGHJKLMNPQRSTUVXYZ';
		for (var i = 0; i &lt; 4; i++) val += str[rand(0, str.length)];
		return val
	};
	this.clientHeight = function() {
		var t, u, s;
		t = $(window).height();
		u = document.body.clientHeight;
		if (u &gt; 1000 || u &lt; 0) s = t;
		else if (t &gt; 1000 || t &lt; 0) s = u;
		else s = t &lt; u ? t: u;
		if (s &lt; 0 || s &gt; 1000) s = 800;
		return s
	};
	this.buttonHTML = '<div class="warn_foot"><div class="warn_button" onclick="WARN.app();">确认</div><div class="warn_button" style="width:60px;" onclick="WARN.closing();">取消</div></div>';
	this.outerHTML = '<div id="warn"><style>#warn{position:fixed;width:300px;margin:auto;opacity:0;filter:Alpha(Opacity=0);z-index:102}#warn_bg{top:0;left:0;width:100%;height:100px;filter:Alpha(Opacity=0);display:inline-block;z-index:99;opacity:0;z-index:101;position:fixed;background-color:#000}#warn_head{height:33px}#warn_head div{background-image:url(/public/images/warn.png);background-repeat:no-repeat;height:33px}#warn_title{height:33px;overflow:hidden;font-size:14px;line-height:31px;text-indent:16px;font-weight:bold;color:#FFF;cursor:pointer}#warn_close{background-position:right top;float:right;width:50px;cursor:pointer}#warn_body{color:#666;font-size:14px;line-height:25px;padding:25px 40px;background-color:#fff;border:#0041db solid 4px;border-top:0}.warn_code_message{line-height:20px;padding:10px 13px;text-align:left;white-space: pre-wrap;}.warn_code_err{color:red;font-size:13px;padding:0 13px 10px}.warn_code_input{letter-spacing:2px;text-indent:5px;font-size:16px;width:80px;height:38px}.warn_code_img{margin-left:5px;height:37px;width:120px;vertical-align:-13px}.warn_foot{text-align:center;margin:15px auto 0;}.warn_button{width:100px;height:30px;line-height:30px;color:#fff;border:0;border-radius:4px;background-color:#3c3;font-size:14px;font-weight:bold;text-align:center;cursor:pointer;display:inline-block;margin:5px}</style><div id="warn_head"><div title="关闭" id="warn_close" onclick="WARN.closing(100);"></div><div title="拖动" id="warn_title" onselectstart="return false">温馨提示！</div></div><div id="warn_body"></div></div>';
	this.closing = this.app = function() {
		clearInterval(this.height);
		this.runing = 1;
		$('#warn_bg,#warn').animate({opacity: 0},this.ship,function() {
			$(this).remove();
			if (typeof(fn) == 'function') fn.call(this, this.data);
		})
	};
	this.code = function(fn) {
		this.title = this.title || '请输入验证码';
		this.width = 320;
		this.html = '<div class="warn_code_message">' + (this.html||this.title) + '</div><div style="text-align:center"><input class="warn_code_input" placeholder="验证码"><img title="点击刷新" class="warn_code_img"></div>' + this.buttonHTML;
		this.onload = function() {
			$('.warn_code_img').bind('click',function() {
				this.src = '/code/' + ( WARN.code_val = WARN.getCode()) + '?code.jpg';
				$('.warn_code_input').val('')
			}).trigger('click');
			$('.warn_code_input').keyup(function() {
				if (this.stristr( WARN.code_val,$(this).val())) {
					WARN.closing();
					WARN.app(true)
				}
			});
			$('.warn_button').click(function(e) {
				e.preventDefault();
				var val = $('.warn_code_input').val();
				if (val.length &lt; 4 || !this.stristr( WARN.code_val,val)) {
					if (!$('.warn_code_err')[0]) $('.warn_code_message').after('<div class="warn_code_err">输入不正确! 单击刷新图片!</div>');
					return
				}
				WARN.app(true);
				WARN.closing();
			});
		}
		this.run();
	};
	this.load = function(src) {
		this.width = this.width||800;
		this.height = this.height||500;
		this.css = {padding: 0};
		this.html = '<iframe width="100%" align="left" id="warn_frame" name="warn_frame" frameborder="0" scrolling="auto" src="'%20+%20src%20+%20'"></iframe><div class="clear"></div>';
		this.onload = function() {
			$('#warn_frame').load(function() {
				var win = this.contentDocument || this.Document || null;
				var src = win.location.href;
				var title = $(win).find('title').html();
				if (win &amp;&amp; title &amp;&amp; src &amp;&amp; src != 'about:blank') {
					$('#warn_title').html(title);
					if (WARN.auto) {
						var children_height = $(win.body).outerHeight();
						if (children_height &gt; 500) children_height = 500;
						var warn_frame = $('#warn_frame,#warn_body');
						var step_height = children_height &gt; WARN.height ? 10 : -10;
						var default_height = WARN.height;
						var time = setInterval(function() {
							default_height += step_height;
							if ((step_height &lt; 0 &amp;&amp; children_height &gt;= default_height) || (step_height &gt; 0 &amp;&amp; children_height &lt;= default_height)) {
								var time2 = setInterval(function() {
									default_height = $(win.body).outerHeight();
									if (default_height &gt; 500) {
										default_height = 500;
										clearInterval(time2)
									}
									warn_frame.css('height',default_height);
									win.height = default_height
								},20);
								clearInterval(time)
							}
							warn_frame.css('height',default_height);
							WARN.resize&amp;&amp;WARN.resize()
						},20)
					}
				}
			})
		}
		this.run();
	};
	this.message = function(html,time) {
		this.html = html;
		this.run();
		setTimeout(function() {
			WARN.closing();
		},time | 2000)
	};	
	this.alert = function(html,time) {
		this.html = '<div class="warn_code_message">'+html+'</div>'+this.buttonHTML;
		this.run();
	};
}

原文链接:http://www.fastmvc.com/blog/1315.html