`
zhou695105338
  • 浏览: 20980 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js弹窗

阅读更多

自己写的一个弹窗程序,大家多指教

支持alert,confim,prompt和自定义模式,支持拖拽

ie6,7,8 firefox,chrome,opera,safari测试通过

 

// JavaScript Document 
var bodyMargin,bodyOverflow,htmlOverflow;
var b,box,iframe,title,message,btns,btnOK,btnCan;
var a;
/*
-------------打开弹窗-----------
参数-->  json方式 支持参数:width,height,title,message,mode=["A"(alert),"C"(confim),"P"(prompt)],sure(此参数是在C/P模式下确定按钮触发的函数),html(html优先mode,自定义弹出框内容)
		非json方式:1个参数-->提示信息
				  2个参数-->宽度,长度
				   		   标题,信息
				  		   模式,确定函数
				  3个参数-->宽度,长度,信息
				  		   信息,模式,确定函数
				  
				  4个参数-->宽度,长度,标题,信息
				  		   标题,信息,模式,确定函数
				  
*/
function ialert(){
	var boxBackColor="white";
	var titleBackColor="#9EC4F5";
	var btnBackColor="#ddd";
	
	var bodyW = document.body.clientWidth;
	var bodyH = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
	var docH = Math.max(document.body.offsetHeight,document.documentElement.offsetHeight);
	
	a=analysisArgu(arguments);	//初始化参数列表
	initEnvironment();
	b = createEle({				//透明背景
		tag:"div",
		style:"position:absolute;left:0;top:0;width:100%;height:100%;background:black url(overlay.png);filter:alpha(opacity:20);opacity:0.2;z-index:100;",
		height:docH,
		parent:document.body
	});
	box = createEle({			//弹窗
		tag:"div",
		style:"width:"+(a.width?parseInt(a.width):300)+"px;height:"+(a.height?parseInt(a.height):150)+"px;background:"+boxBackColor+";z-index:101",
		parent:document.body,
		abscenter:true
	});
	iframe = !isNavi("ie",6)?null:createEle({			//修复ie6下拉框bug
		tag:"iframe",
		style:"position:absolute;left:0;top:0;width:100%;height:100%;background:black;filter:alpha(opacity:20);opacity:0.2;z-index:100;",
		height:bodyH,
		parent:document.body
	});
	var isBig = box.offsetWidth>=400?true:false;	//窗体是否够大
	var boxW = box.offsetWidth;
	var boxH = box.offsetHeight;
	var btnClose = createEle({	//关闭按钮
		tag:"a",
		style:"position:absolute;left:"+(boxW-25)+"px;top:3px;font:14px bold;z-index:102;display:block;text-decoration:none;border:1px solid lightgray;font-family:黑体,雅黑,宋体 ",
		attrs:{href:"javascript:cls();","class":"ialert_a"},
		parent:box,
		html:"×"
	});
	if(a.html) {				//自定义代码模式
		box.html(a.html);
		makeDragable(box);
		return ;
	}
	title = createEle({		//标题
		tag:"div",
		style:"height:"+(isBig?35:25)+"px;width:100%;background:"+titleBackColor+";text-align:left;line-height:"+(isBig?35:25)+"px;letter-spacing:2px;font-weight:bold;cursor:move"
			  +";font-family:黑体,宋体",
		html:"<span style='margin-left:20px;cursor:move;' selectable='false'>"+((a.title||a.title=="")?a.title:"提示")+"</span>",
		parent:box
	});
	message = createEle({	//提示信息
		tag:"p",
		style:"text-align:left;height:50%;padding:0 10px;text-indent:20px;font-size:12px;line-height:22px;",
		html:(a.message||a.message=="")?a.message:"确定吗?",
		parent:box
	});
	btns = createEle({
		tag:"div",
		parent:box,
		style:"text-align:right;border-top:1px solid grey;background-color:"+btnBackColor+";padding-top:10px;position:absolute;bottom:0px;right:0px;width:100%;height:35px;"
	});
	switch(a.mode){
		case "A":
			A();
			break;
		case "C":	
			C();
			break;
		case "P":
			P();
			break;
		default:
			A();
			break;
	}
	title.onmousedown = function(){
		makeDragable(box);
	}
	box.onmouseup = function(){
		dragObject = null;
	}
}
//----------alert模式---------
var A=function(){
	btnOK = createEle({
		tag:"input",
		style:"border:1px solid grey;padding:5px 15px !important;padding:3px 8px;margin-right:20px;",
		parent:btns,
		attrs:{
			type:"button",
			value:"确定"	
		}
	});
	btnOK.onclick=function(){cls();};
}
//------------confirm模式-------------
var C = function(){
	A();
	btnOK.onclick=function(){
		cls();
		try{
			a.sure();
		}catch(e){
			ialert({message:"confirm模式下,必须定义确定按钮触发事件"});
		}
	};
	btnCan = createEle({
		tag:"input",
		style:"border:1px solid grey;padding:5px 15px !important;padding:3px 8px;margin-right:20px;",
		parent:btns,
		attrs:{
			type:"button",
			value:"取消"
		}
	});
	btnCan.onclick=cls;
}
//------------prompt模式-----------
var P = function(){
	A();
	message.html(a.message?a.message:"");
	message.style.textAlign="center";
	var txt = createEle({
		tag:"input",
		style:"border:1px solid;height:25px;line-height:25px;border-bottom-color:#999;border-right-color:#999;background-color:white;border-left-color:#ccc;border-top-color:#ccc",
		attrs:{type:"text"},
		parent:message
	});
	btnOK.onclick=function(){
		cls();
		try{
			a.sure(txt.value);
		}catch(e){
			ialert({message:"prompt模式下,必须定义确定按钮触发事件"});
		}
	}
	title.html("<span style='margin-left:20px;cursor:move;' selectable='false'>请输入</span>");
}

//-----------解析参数---------
function analysisArgu(){
	var argu = {};
	var argus = arguments[0];
	switch(argus.length){
		case 1:
			if(typeof(argus[0])=="string"){							//参数为提示信息
				argu.message=argus[0];
			}else argu = argus[0];									//参数为json方式
			break;
		case 2:
			if(parseInt(argus[0])){									//宽度,长度
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);	
			}else if(typeof(argus[1])=="function"){					//模式,确定函数
				argu.mode=argus[0];
				argu.sure=argus[1];
			}else{													//标题,信息
				argu.title=argus[0];
				argu.message=argus[1];
			}
			break;
		case 3:
			if(parseInt(argus[0])){									//宽度,长度,信息
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);
				argu.message=argus[2];
			}else{													//信息,模式,确定函数
				argu.message=argus[0];
				argu.mode=argus[1];
				argu.sure=argus[2];
			}
			break;
		case 4:
			if(parseInt(argus[0])){									//宽度,长度,标题,信息
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);
				argu.title=argus[2];
				argu.message=argus[3];
			}else{													//标题,信息,模式,确定函数
				argu.title=argus[0];
				argu.message=argus[1];
				argu.mode=argus[2];
				argu.sure=argus[3];
			}
			break;
	}
	return argu;
}
//-----------创建元素-------------
function createEle(argu){
	var ele = document.createElement(argu.tag);
	if(argu.style) ele.style.cssText=argu.style;
	if(argu.cssClass) ele.className = argu.cssClass;
	if(argu.height) ele.style.height=parseInt(argu.height)+"px";
	if(argu.width) ele.style.width = parseInt(argu.width)+"px";
	if(argu.abscenter)	{
		var scrolltop = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		var scrollleft = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
		ele.style.cssText+=";position:absolute;left:50%;top:50%;margin-left:"+
		(-parseInt(ele.style.width)/2+scrollleft)+"px;margin-top:"+(-parseInt(ele.style.height)/2+scrolltop)+"px;";
	}
	if(argu.attrs){
		for(var attr in argu.attrs){
			ele.setAttribute(attr,argu.attrs[attr]);
		}
	}
	if(argu.html) ele.innerHTML = argu.html;
	if(argu.child){
		var child = argu.child;
		if(!child.length)  ele.appendChild(child);
		else{
			for(var i=0;i<child.length;i++){
				ele.appendChild(child[i]);
			}
		}
	}
	if(argu.parent)	argu.parent.appendChild(ele);
	ele.html=function(){
		if(arguments.length==0) return ele.innerHTML;
		else {ele.innerHTML = arguments[0];	return ele;}
	}
	ele.remove=function(){
		if(arguments.length==0) ele.parentNode.removeChild(ele);
		else ele.removeChild(arguments[0]);
	}
	return ele;
}
//------------初始化环境-----------
function initEnvironment(){
	//createStyle();
	addCssByStyle();
	bodyMargin = document.body.style.margin;
	bodyOverflow = document.body.style.overflow;
	htmlOverflow = document.documentElement.style.overflow;
	document.body.style.cssText="margin:0;overflow:hidden;";
	if(window.ActiveXObject) document.documentElement.style.overflow="hidden";
}
//-------------还原环境------------
function regainEnvironment(){
	document.body.style.margin = bodyMargin;
	document.body.style.overflow = bodyOverflow;
	document.documentElement.style.overflow = htmlOverflow;
}
//----------关闭弹窗--------
function cls(){
	regainEnvironment();
	document.body.removeChild(b);
	document.body.removeChild(box);
	if(iframe) document.body.removeChild(iframe);
}
//------------创建css样式表--------
//ie6,7下如果样式表也是动态创建的,元素也是动态创建的,则样式无效
function createStyle(){
	var styles = document.getElementsByTagName("style");
	if(styles.length==0){
	if(document.createStyleSheet) document.createStyleSheet();
	else  createEle({
			tag:"style",
			parent:document.getElementsByTagName("head")[0],
			attrs:{type:"text/css"}
		});
	}
	var mystyle=styles[0];
	if(mystyle.media!=null)  {
		mystyle.media="screen";
	}
	var text = ".ialert_a,.ialert_a:visited{border:1px solid lightgray;background:#fff;}.ialert_a:hover{background:#ccc}";
	if(mystyle.styleSheet) {
		mystyle.styleSheet.cssText=text;
	}
	else mystyle.innerHTML=text;
}
//------------另一种创建样式表方式-----------
function addCssByStyle(cssString){
    var doc=document;
    var style=doc.createElement("style");
    style.setAttribute("type", "text/css");
	
	var cssString = ".ialert_a,.ialert_a:visited{border:1px solid lightgray;background:#fff;}.ialert_a:hover{background:#ccc;}";
	
    if(style.styleSheet){// IE
        style.styleSheet.cssText = cssString;
    } else {//w3c
        var cssText = doc.createTextNode(cssString);
        style.appendChild(cssText);
    }
    var heads = doc.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(style);
    else
        doc.documentElement.appendChild(style);
}

//--------------判断浏览器--------------
function isNavi(browser,version){
	var tag=false;
	var agent = navigator.userAgent.toLowerCase();
	switch(browser.toLowerCase()){
		case "ie":
			if(agent.indexOf("msie")>0){
				if(version){
					if(agent.indexOf(version)>0&&agent.indexOf(version)-agent.indexOf("msie")<6) tag=true
				}else tag=true;
			}
	}
	return tag;
}
//-----------------元素拖拽---------------
var dragObject = null;
var mouseOffset = null;
document.onmousemove = function(ev){
	ev = ev || window.event;
	var mousePos = mouseCroods(ev);
	if(dragObject){
		dragObject.style.position = "absolute" ;
		//----------调试弹窗拖拽用的---------
		/*title.html(dragObject.offsetTop+"--"+(mousePos.y - mouseOffset.y)+"--|--"+dragObject.offsetLeft+"--"+(mousePos.x - mouseOffset.x ));
		message.html("dragobject:left-"+dragObject.offsetLeft+",top-"+dragObject.offsetTop+"<br />"+
			"mousePos:x-"+mousePos.x+",y-"+mousePos.y+"<br />"+
			"dargobject:marginleft->"+dragObject.style.marginLeft+"margintop->"+dragObject.style.marginTop);*/
		var marginTop = parseInt(dragObject.style.marginTop);
		var marginLeft = parseInt(dragObject.style.marginLeft);
		dragObject.style.top = mousePos.y - mouseOffset.y - (marginTop?marginTop:0) + "px";
		dragObject.style.left = mousePos.x - mouseOffset.x - (marginLeft?marginLeft:0) + "px";
		return false;
	}
}
document.onmouseup=function(){
	dragObject = null;
}
function makeDragable(obj){
	if(!obj) return;
	obj.onmousedown = function(ev){
		dragObject = this;
		mouseOffset = getMouseOffset(this,ev);
		return false;
	}
}
function getMouseOffset(target,ev){
	ev = ev || window.event;
	var docPos = getPosition(target);
	var mousePos = mouseCroods(ev);
	return {x:mousePos.x - docPos.x,y:mousePos.y - docPos.y}
}
function mouseCroods(ev){
	if(ev.pageX||ev.pageY){
		return {x:ev.pageX,y:ev.pageY}	
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop - document.body.clientTop
	}
}
function getPosition(e){
	var left = 0;
	var top = 0;
	while(e.offsetParent){
		left += e.offsetLeft;
		top += e.offsetTop;
		e = e.offsetParent;
	}
	left += e.offsetLeft;
	top += e.offsetTop;
	return {x:left,y:top}
}

 下面是测试页面,测试之前把以上js代码复制保存为ialert.js文件

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="ialert.js"></script>
</head>

<body>

<div style="width:700px;margin:100px auto;padding:20px;border:1px solid blue;">

<div id="dragdiv" style="height:100px;border:1px solid;background:#ddd;width:400px;height:200px;cursor:move">拖拽测试</div>


<script>
makeDragable(document.getElementById("dragdiv"));
</script>



拖拽参考页面<a class="ialert_a" href="http://www.blogjava.net/flyingis/archive/2006/10/11/74591.html" target="_blank">http://www.blogjava.net/flyingis/archive/2006/10/11/74591.html</a>


    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('hello')" value="信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert({width:400,height:250,title:'json',message:'json test'})" value="json" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'500px')" value="宽度,长度" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('标题','信息')" value="标题,信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('P',function(txt){ialert(txt)})" value="模式,确定函数" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'200px','这是信息')" value="宽度,长度,信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('信息','C',function(){ialert('C模式')})" value="信息,模式,确定函数" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'200px','这是标题','这是信息')" value="宽度,长度,标题,信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('标题','信息','C',function(){ialert('C模式')})" value="标题,信息,模式,确定函数" />
</div>
</body>
</html>

 还有背景图片,爱加不加


  • 大小: 145 Bytes
8
0
分享到:
评论
1 楼 Dxx23 2011-06-29  
支持!

相关推荐

    基于jQuery的轻量级js弹窗插件

    jQuery作为一个强大的JavaScript库,简化了DOM操作,使得创建自定义弹窗插件变得更加简单。本项目“基于jQuery的轻量级js弹窗插件”旨在提供一个轻巧且灵活的解决方案,以满足开发者在各种场景下的弹窗需求。 首先...

    最新js弹窗代码大全

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,尤其在前端领域,它是实现动态效果、交互性以及用户界面增强的重要工具。在本资源"最新js弹窗代码大全"中,包含了一系列用于创建弹出层...

    美化JS弹窗

    在网页开发中,JavaScript弹窗是一种常见的用户交互方式,用于提示信息、确认操作或收集用户输入。原始的JavaScript alert和confirm弹窗虽然功能实用,但样式单一,有时并不符合现代网页设计的美观要求。"美化JS弹窗...

    js弹窗的功能小块

    在JavaScript(JS)中,弹窗功能是一种常见的用户交互手段,用于显示额外信息或获取用户输入。本知识点将深入探讨如何实现JS弹窗,并结合描述中的"应用另外一个界面做当前界面的弹窗功能块"以及"设置复选框的选择...

    three.js 弹窗html页面示例

    在IT行业中,JavaScript和HTML是构建网页交互性的重要技术,而`three.js`是一个非常流行的JavaScript库,专门用于在浏览器中创建和展示3D图形。本示例将探讨如何使用`three.js`来实现3D模型点击后弹出HTML页面的功能...

    Javascript弹窗代码大收集

    ### JavaScript弹窗代码知识点解析 #### 一、基础弹窗函数 在提供的代码片段中,首先展示了一个较为简单的弹窗函数实现方式: ```javascript function openwin() { window.open('page.html', '', 'width=200,...

    JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    经典的,超强的js弹窗

    "经典的,超强的js弹窗"是一个专门针对JavaScript弹窗功能的资源,它提供了强大的自定义能力,使得开发者能够轻松创建符合自身需求的弹窗效果。 弹窗在网页应用中是非常常见的一种元素,它可以用于提示信息、确认...

    很实用的JS弹窗

    运用javascript写的一个小玩意,很实用的JS弹窗,效果不错。大家可以试试。希望有帮助

    JavaScript弹窗插件

    JavaScript弹窗插件是一种在网页上实现交互式提示或通知功能的工具,它通常通过JavaScript编程语言来编写,可以提供丰富的用户体验。JavaScript是Web开发中的重要脚本语言,它允许开发者在用户与网页之间建立动态...

    非常绚丽的js弹窗

    "非常绚丽的js弹窗"是一个关于利用JavaScript实现美观、吸引用户的弹出窗口的项目。在这个项目中,样式源代码和JavaScript代码一同提供了创建独特弹窗效果的完整解决方案。 首先,我们要理解弹窗的基本概念。在网页...

    多种JS弹窗效果

    JavaScript(简称JS)是一种轻量级的编程语言,广泛用于网页和网络应用的开发,尤其在实现用户交互方面起着至关重要的作用。本资源“多种JS弹窗效果”收集了一系列的弹窗效果示例,旨在帮助开发者提升网页的用户体验...

    js 弹窗 http://hi.baidu.com/18201670151/home

    JavaScript(简称JS)是一种轻量...综上所述,JavaScript弹窗技术是网页开发中的基础技能,结合Cookie的使用可以实现更丰富的用户交互和状态管理。同时,保证代码在多种浏览器下的兼容性是开发过程中不容忽视的一部分。

    简单时尚的js弹窗可以自由拖拽同时兼容主流浏览器.zip

    总的来说,这个资源提供了创建可自由拖动的JavaScript弹窗的方法,它兼顾了界面美观和跨浏览器兼容性,对于前端开发者来说,是一个实用且有价值的工具。通过学习和理解其中的代码实现,开发者可以提升自己的前端技能...

    require封装JS弹窗

    在JavaScript编程中,"require"通常指的是CommonJS规范中的模块导入机制,它是Node.js环境下的标准,用于在不同模块之间共享代码。在这个场景下,"require封装JS弹窗"意味着我们正在讨论一个自定义的弹出窗口组件,...

    原生js easydialog.js弹窗控件多种拖动弹出框效果代码

    在给定的标题“原生js easydialog.js弹窗控件多种拖动弹出框效果代码”中,我们可以理解这是一个基于JavaScript实现的弹窗插件——easydialog.js。这个插件专注于提供可拖动的、多样的弹出框效果,增强了用户体验。 ...

    真实可弹的JS弹窗代码

    关于JS弹窗代码 给定的代码示例实际上并不是一个典型的弹窗代码。通常所说的弹窗代码是指能够打开一个新的浏览器窗口或弹出层的JavaScript代码。例如: ```javascript window.alert("这是一个弹窗!"); ``` 或者...

    简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

    标题中的“简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器”是指一种使用JavaScript实现的弹窗功能,它具有美观的界面设计,并且允许用户自由地拖动弹窗位置,同时该代码兼容多数主流浏览器,提供了良好的用户体验。...

    防DZ的网页js弹窗

    在这个场景中,"防DZ的网页js弹窗"是一个专门用来抵御DDoS攻击的JavaScript解决方案。 首先,我们要理解这个JS弹窗的工作原理。网页js弹窗通常用于向用户展示重要的信息,如警告、提示或者确认对话框。在防DDoS的...

    js弹窗代码

    JS弹窗代码,如果表单空的则弹出“表单不能为空”的提醒,如果不为空,则可以提交。

Global site tag (gtag.js) - Google Analytics