The pop-up box in the front page of the web (1)

When editing some data on the current page on the front end, pop-up windows are often used, but it is more troublesome to modify each page individually. Therefore, a common method can be established and removed;

First on the effect map

The picture above is the rendering, if it is not the type you are looking for, please detour.

1. Create method

function OpenDetial(id, url, title, width, height) {
    debugger;
    var _srcWidth = parseInt(screen.width);
    var _srcHeight = parseInt(screen.height);
    _width = parseInt(width) || _srcWidth;
    _height = parseInt(height) || _srcHeight;

    var cssWidth = width == undefined ? "100%" : _width;
    var cssHeight = height == undefined ? "100%" : _height;

    var left = (_srcWidth - _width) == 0 ? 0 : ((_srcWidth - _width) / 2 - 300);
    var top = (_srcHeight - _height) == 0 ? 0 : ((_srcHeight - _height) / 2 - 100);


    var _id = "#" + id;
    var close = "CloseDetial('" + id + "')";
    var detial =
        '<div id="panel">'
        + '<div id="title" height="25px" style="font-size:14pt;padding:4px;font-weight: bold;background:rgba(236, 241, 241, 0.82);" align="center"></div>'
        + '<div id= "titleDetial" style= "cursor: pointer;position:absolute;top:2px;width:80%;height:25px;" align= "center"></div>'
        + '<div id="coloseDetial" title="点击关闭" style="cursor: pointer;position:absolute;top:2px;right:18px;width:80px;height:25px;">'
        + ' <a id="ClosesButton" href="javascript:void(0)" onclick="' + close + '" title="关闭" style="border:1px solid #22acac"   class="button green"><span class="icon-botton"  style="background: url(\'/Themes/Images/cancel.png\') no-repeat scroll 0px 4px"></span> 关 闭</a > '
        + ' </div>'
        + ' <iframe id="detialForm" style="border:0px;border-top:1px solid #22acac; width:100%;height:93%" ></iframe>'
        + '</div>';
    $(_id).html(detial);
    $("#title").html(title);
    $(_id).css({ "display": "none", "position": "absolute", "bottom": "10px", "width": "100%", "top": "2px", "height": "96%", "background-color": "rgba(223, 236, 236, 0.36)"});
    $("#panel").css({ "width": cssWidth, "height": cssHeight, "left": left, "top": top, "position": "absolute", "border": "1px solid #22acac", "opacity": "1", "background-color": "white" });
    $("#detialForm").attr("src", url);
    $(_id).slideDown();

   
}

function CloseDetial(id) {
    debugger;
    $("#"+id.trim()).slideUp();
}

2. Page call

  <!--Introduce jquery file-->
    <script src="/Themes/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>     
    <script type="text/javascript">        
	function add() {
		var url = "/SysBase/SysUser/UserInfo_form.aspx";
		OpenDetial("UserEdit", url, "User Information - Add", 700, 500); //Call the method        
	}    
	</script>
</head>
<body>	
<!--Create a DIV that hosts the popup page-->     
	<div id="UserEdit"></div>   
 </body>

3. Attachment pictures

The pop-up box in the front page of the web (1)

Guess you like