• 遮罩层,可拖动


    效果:

    /*
    title: 窗口标题
    content: 内容(可选内容为){ text | id | img | url | iframe }
     内容宽度
    height: 内容高度
    drag: 是否可以拖动(ture为是,false为否)
    原理:主要是对div的z-index的控制。
    */
    $(document).ready(function(){
    	function TipsWindown(title,content,width,height,drag) {
    		$("#windown-box").remove(); 
    		this.title = title;
    		this.content = content;
    		this.width = width >= 950 ? this.width=950 : this.width = width;	    
    		this.height = height >= 527 ? this.height=527 : this.height= height; 
    		this.drag = drag?drag:true;
    		var that = this;
    		var windownBg_html = new String;
    		windownBg_html = "<div>"+
    						"<div id='windownbg' style='height:"+$(window).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999900'></div>"+
    						"<div id='windown-box' class='ui-widget-content'>"+
    							"<div id='windown-title'><h2></h2><span id='windown-close'>关闭</span></div>"+
    							"<div id='windown-content-border'><div id='windown-content'></div></div>"
    						"</div>"+
    					"</div>";
    		var $template = $(windownBg_html);					
    		$template.find("h2").html(this.title);
    		$template.find("#windown-content").html($("#"+this.content).html());		
    		$("body").append($template.html());
    		$("#windownbg").show();
    		$("#windownbg").animate({opacity:"0.5"},"normal");
    		$("#windown-box").show();
    		if( this.height >= 527 ) {
    			$("#windown-title").css({(parseInt(this.width)+22)+"px"});
    			$("#windown-content").css({(parseInt(this.width)+17)+"px",height:this.height+"px"});
    		}else {
    			$("#windown-title").css({(parseInt(this.width)+10)+"px"});
    			$("#windown-content").css({width+"px",height:this.height+"px"});
    		}
    		$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(this.height)+53)/2)+"px",marginLeft:-((parseInt(this.width)+32)/2)+"px"});
    		if(this.drag){
    			$("#windown-box").draggable();
    		}
    		$("#windown-close").live("click",function(){
    			that.closeWindown();
    		});
    }
    	TipsWindown.prototype.closeWindown = function(){
    		$("#windownbg").remove();
    		$("#windown-box").fadeOut("slow",function(){$(this).remove();});
    	}
    	var tipsWindownObject = null;
    	$("#isread").bind("click",function(){
    		tipsWindownObject = new TipsWindown("jquery弹出层", 'simTestContent', 600, 255);
    	});
    	$("#confirmTerm").live("click",function(){
    		tipsWindownObject.closeWindown();
    	});
    });
    

    下载地址:https://files.cnblogs.com/qduanlu/Float.zip

  • 相关阅读:
    @getMapping与@postMapping
    springcloud--入门
    Linux(centos6.5)mysql安装
    基于用户Spark ALS推荐系统(转)
    hadoop MapReduce在Linux上运行的一些命令
    Navicat连接阿里云轻量级应用服务器mysql
    HDFS操作笔记
    线程池的5种创建方式
    分布式共享锁的程序逻辑流程
    推荐系统常用数据集
  • 原文地址:https://www.cnblogs.com/qduanlu/p/2872770.html
Copyright © 2020-2023  润新知