• 将网页以编辑框形式弹出方法2(Jquery 方法)


    不做解释大家看看就明白了,下面是我项目的源代码。

    tipswindows.js文件

    ///-------------------------------------------------------------------------
    //jQuery弹出窗口 By Await [2009-11-22]
    //--------------------------------------------------------------------------
    /*参数:[可选参数在调用时可写可不写,其他为必写]
    ----------------------------------------------------------------------------
        title:	窗口标题
      content:  内容(可选内容为){ text | id | img | url | iframe }
        	内容宽度
       height:	内容高度
    	 drag:  是否可以拖动(ture为是,false为否)
         time:	自动关闭等待的时间,为空是则不自动关闭
       showbg:	[可选参数]设置是否显示遮罩层(0为不显示,1为显示)
      cssName:  [可选参数]附加class名称
     ------------------------------------------------------------------------*/
     //示例:
     //------------------------------------------------------------------------
     //simpleWindown("例子","text:例子","500","400","true","3000","0","exa")
     //------------------------------------------------------------------------
    var showWindown = true;
    var templateSrc = "http://leotheme.cn/wp-content/themes/Dreamy"; //设置loading.gif路径
    function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {
    	$("#windown-box").remove(); //请除内容
    	var width = width>= 950?this.width=950:this.width=width;	    //设置最大窗口宽度
    	var height = height>= 527?this.height=527:this.height=height;  //设置最大窗口高度
    	if(showWindown == true) {
    		var simpleWindown_html = new String;
    			simpleWindown_html = "<div id="windownbg" style="height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901"></div>";
    			simpleWindown_html += "<div id="windown-box">";
    			simpleWindown_html += "<div id="windown-title"><h2></h2><span id="windown-close">关闭</span></div>";
    			simpleWindown_html += "<div id="windown-content-border"><div id="windown-content"></div></div>"; 
    			simpleWindown_html += "</div>";
    			$("body").append(simpleWindown_html);
    			show = false;
    	}
    	contentType = content.substring(0,content.indexOf(":"));
    	content = content.substring(content.indexOf(":")+1,content.length);
    	switch(contentType) {
    		case "text":
    		$("#windown-content").html(content);
    		break;
    		case "id":
    		$("#windown-content").html($("#"+content+"").html());
    		break;
    		case "img":
    		$("#windown-content").ajaxStart(function() {
    			$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
    		});
    		$.ajax({
    			error:function(){
    				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    			},
    			success:function(html){
    				$("#windown-content").html("<img src="+content+" alt='' />");
    			}
    		});
    		break;
    		case "url":
    		var content_array=content.split("?");
    		$("#windown-content").ajaxStart(function(){
    			$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
    		});
    		$.ajax({
    			type:content_array[0],
    			url:content_array[1],
    			data:content_array[2],
    			error:function(){
    				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    			},
    			success:function(html){
    				$("#windown-content").html(html);
    			}
    		});
    		break;
    		case "iframe":
    		$("#windown-content").ajaxStart(function(){
    			$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
    		});
    		$.ajax({
    			error:function(){
    				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    			},
    			success:function(html){
    				$("#windown-content").html("<iframe src=""+content+"" width="100%" height=""+parseInt(height)+"px"+"" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0"></iframe>");
    			}
    		});
    	}
    	//download by http://www.codefans.net
    	$("#windown-title h2").html(title);
    	if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};
    	$("#windownbg").animate({opacity:"0.5"},"normal");//设置透明度
    	$("#windown-box").show();
    	if( height >= 527 ) {
    		$("#windown-title").css({(parseInt(width)+22)+"px"});
    		$("#windown-content").css({(parseInt(width)+17)+"px",height:height+"px"});
    	}else {
    		$("#windown-title").css({(parseInt(width)+10)+"px"});
    		$("#windown-content").css({width+"px",height:height+"px"});
    	}
    	var	cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop; 
    	var _version = $.browser.version;
    	if ( _version == 6.0 ) {
    		$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
    	}else {
    		$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
    	};
    	var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");
    		
    	var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;
    		if ( _version == 6.0 ) {
    			moveTop = est;
    		}else {
    			moveTop = 0;
    		}
    	var	sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;
    		DragHead.onmouseover = function(e) {
    			if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}
    		};
    		DragHead.onmousedown = function(e) {
    		if(drag == "true"){moveable = true;}else{moveable = false;}
    		e = window.event?window.event:e;
    		var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
    		moveX = e.clientX-ol;
    		moveY = e.clientY-ot;
    		document.onmousemove = function(e) {
    				if (moveable) {
    				e = window.event?window.event:e;
    				var x = e.clientX - moveX;
    				var y = e.clientY - moveY;
    					if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
    						Drag_ID.style.left = x + "px";
    						Drag_ID.style.top = parseInt(y+moveTop) + "px";
    						Drag_ID.style.margin = "auto";
    						}
    					}
    				}
    		document.onmouseup = function () {moveable = false;};
    		Drag_ID.onselectstart = function(e){return false;}
    	}
    	$("#windown-content").attr("class","windown-"+cssName);
    	var closeWindown = function() {
    		$("#windownbg").remove();
    		$("#windown-box").fadeOut("slow",function(){$(this).remove();});
    	}
    	if( time == "" || typeof(time) == "undefined") {
    		$("#windown-close").click(function() {
    			$("#windownbg").remove();
    			$("#windown-box").fadeOut("slow",function(){$(this).remove();});
    		});
    	}else { 
    		setTimeout(closeWindown,time);
    	}
    }
    

     前台引用;

     function TipEdit(id) {
                if (id != null) {
                    tipsWindown("报名信息", "iframe:SignupDLAdd.aspx?type=edit&id=" + id, "880", "420", "true", "", "true");
                    //  tipsWindown("收费信息", "iframe:SignUpPrice.aspx?type=edit&id=" + id, "590", "260", "true", "", "true");
                }
                else {
                    tipsWindown("报名信息", "iframe:SignupDLAdd.aspx?type=new", "880", "420", "true", "", "true");
                }
            }
    ..
    .
    .
    .
    .
      <dx:ASPxButton ID="btnAdd1" runat="server" Text="添加" Width="100px" ClientIDMode="AutoID"
                            AutoPostBack="False" CausesValidation="false" CssFilePath="~/App_Themes/Aqua/{0}/styles.css"
                            CssPostfix="Aqua" SpriteCssFilePath="~/App_Themes/Aqua/{0}/sprite.css">
                            <ClientSideEvents Click="function(s, e) {
                        TipEdit1(null);
  • 相关阅读:
    性能测试七:jmeter进阶之文件上传下载、定时器
    性能测试六:jmeter进阶之Cookie与header管理器
    导出文本、表格、图像到PDF格式文件中(学习整理)
    数据库(学习整理)----7--Oracle多表查询,三种join连接
    反射(学习整理)----Class类和加载器ClassLoader类的整理
    反射(学习整理)----操作类、属性、方法!
    数据库(学习整理)----6--Oracle如何快速备份和多次备份数表数据
    数据库(学习整理)----5--Oracle常用的组函数
    数据库(学习整理)----4--Oracle数据查询(基础点1)
    Java小例子(学习整理)-----学生管理系统-控制台版
  • 原文地址:https://www.cnblogs.com/kainjie/p/3424805.html
Copyright © 2020-2023  润新知