JqueryDialog非模式的弹出

出处：http://www.cnblogs.com/wu-jian/archive/2010/02/03/1662751.html

我想修改非模式的，可以弹出多个div的。类似多窗口的，关闭和拖动不能实现。请帮组看看，不胜感谢！现在可以弹出多个div，通过showDiv方法。
var JqueryDialog = {
 
 //配置项
 //模态窗口背景色
 "cBackgroundColor"   : "#ffffff",
 
 //阴影距离(右)
 "cShdowRight"    : 5,
 //阴影距离(下)
 "cShdowDown"    : 5,
 
 //边框尺寸(像素)
 "cBorderSize"    : 2,
 //边框颜色
 "cBorderColor"    : "#999999",

//Header背景色
 "cHeaderBackgroundColor" : "#f0f0f0",
 //右上角关闭显示文本
 "cCloseText"    : "X 关闭",
 //鼠标移上去时的提示文字
 "cCloseTitle"    : "关闭",
 
 //Bottom背景色
 "cBottomBackgroundColor" : "#f0f0f0",
 //提交按钮文本
 "cSubmitText"    : "提 交",
 //取消按钮文本
 "cCancelText"    : "取 消",
 
 //拖拽效果
 "cDragTime"     : "100",
 
 /// <summary>创建对话框(自定义)</summary>
 /// <param name="dialogTitle">对话框标题</param>
 /// <param name="iframeSrc">iframe嵌入页面地址</param>
 /// <param name="iframeWidth">iframe嵌入页面宽</param>
 /// <param name="iframeHeight">iframe嵌入页面高</param>
 Open:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight){
  JqueryDialog.init(dialogTitle, iframeSrc, iframeWidth, iframeHeight, true, true);
 },
 ShowDiv:function(id_,dialogTitle, iframeSrc, iframeWidth, iframeHeight){
  JqueryDialog.init2(id_,dialogTitle, iframeSrc, iframeWidth, iframeHeight, true, true);
 },
 /// <summary>创建对话框(自定义1,不包含底部)</summary>
 /// <param name="dialogTitle">对话框标题</param>
 /// <param name="iframeSrc">iframe嵌入页面地址</param>
 /// <param name="iframeWidth">iframe嵌入页面宽</param>
 /// <param name="iframeHeight">iframe嵌入页面高</param>
 Open1:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight){
  JqueryDialog.init(dialogTitle, iframeSrc, iframeWidth, iframeHeight, false, true);
 }, 
init:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight, isBottom, isDrag)
{
 var _px_shadow = 5;
 var _px_top = 30;
 var _px_bottom = 50;
 if(!isBottom){
  _px_bottom = 0;
 }
 var _client_width = document.body.clientWidth;
 var _client_height = document.documentElement.scrollHeight;
 if(typeof($("#jd_shadow")[0]) == "undefined")
 {
  $("body").prepend("<div id=‘jd_shadow‘>&nbsp;</div>");
  var _jd_shadow = $("#jd_shadow");
  _jd_shadow.css("width", _client_width + "px");
  _jd_shadow.css("height", _client_height + "px");
 }
 if(typeof($("#jd_dialog")[0]) != "undefined")
 { 
  $("#jd_dialog").remove();
 }
 $("body").prepend("<div id=‘jd_dialog‘></div>");
 var _jd_dialog = $("#jd_dialog");
 _dragObjs = _jd_dialog;
 var _left = (_client_width - (iframeWidth + JqueryDialog.cBorderSize * 2 + JqueryDialog.cShdowRight)) / 2;
 _jd_dialog.css("left", (_left < 0 ? 0 : _left) + document.documentElement.scrollLeft + "px");
 var _top = (document.documentElement.clientHeight - (iframeHeight + JqueryDialog.cBorderSize * 2 + _px_top + _px_bottom + JqueryDialog.cShdowDown)) / 2;
 _jd_dialog.css("top", (_top < 0 ? 0 : _top) + document.documentElement.scrollTop + "px");
 _jd_dialog.append("<div id=‘jd_dialog_s‘>&nbsp;</div>");
 var _jd_dialog_s = $("#jd_dialog_s");
 _jd_dialog_s.css("width", iframeWidth + JqueryDialog.cBorderSize * 2 + "px");
 _jd_dialog_s.css("height", iframeHeight + JqueryDialog.cBorderSize * 2 + _px_top + _px_bottom + "px");
 _jd_dialog_s.css("left", JqueryDialog.cShdowRight + "px");
 _jd_dialog_s.css("top", JqueryDialog.cShdowDown + "px");
 _jd_dialog.append("<div id=‘jd_dialog_m‘></div>");
 var _jd_dialog_m = $("#jd_dialog_m");
 _jd_dialog_m.css("border", JqueryDialog.cBorderColor + " " + JqueryDialog.cBorderSize + "px solid");
 _jd_dialog_m.css("width", iframeWidth + "px");
 _jd_dialog_m.css("background-color", JqueryDialog.cBackgroundColor);
 _jd_dialog_m.append("<div id=‘jd_dialog_m_h‘></div>");
 var _jd_dialog_m_h = $("#jd_dialog_m_h");
 _jd_dialog_m_h.css("background-color", JqueryDialog.cHeaderBackgroundColor);
 _jd_dialog_m_h.append("<span id=‘jd_dialog_m_h_l‘>" + dialogTitle + "</span>");
 _jd_dialog_m_h.append("<span id=‘jd_dialog_m_h_r‘ title=‘" + JqueryDialog.cCloseTitle + "‘ onclick=‘JqueryDialog.Close();‘>" + JqueryDialog.cCloseText + "</span>");
 _jd_dialog_m.append("<div id=‘jd_dialog_m_b‘></div>");var _jd_dialog_m_b = $("#jd_dialog_m_b");
 _jd_dialog_m_b.css("width", iframeWidth + "px");
 _jd_dialog_m_b.css("height", iframeHeight + "px");
 _jd_dialog_m_b.append("<div id=‘jd_dialog_m_b_1‘>&nbsp;</div>");
 var _jd_dialog_m_b_1 = $("#jd_dialog_m_b_1");
 _jd_dialog_m_b_1.css("top", "30px");
 _jd_dialog_m_b_1.css("width", iframeWidth + "px");
 _jd_dialog_m_b_1.css("height", iframeHeight + "px");
 _jd_dialog_m_b_1.css("display", "none");
 _jd_dialog_m_b.append("<div id=‘jd_dialog_m_b_2‘></div>");
 $("#jd_dialog_m_b_2").append("<iframe id=‘jd_iframe‘ src=‘"+iframeSrc+"‘ scrolling=‘no‘ frameborder=‘0‘ width=‘"+iframeWidth+"‘ height=‘"+iframeHeight+"‘ />");
  if(isBottom){
   _jd_dialog_m.append("<div id=‘jd_dialog_m_t‘ style=‘background-color:"+JqueryDialog.cBottomBackgroundColor+";‘></div>");
   var _jd_dialog_m_t = $("#jd_dialog_m_t");
   _jd_dialog_m_t.append("<span><input id=‘jd_submit‘ value=‘"+JqueryDialog.cSubmitText+"‘ type=‘button‘ onclick=‘JqueryDialog.Ok();‘ /></span>");
   _jd_dialog_m_t.append("<span class=‘jd_dialog_m_t_s‘><input id=‘jd_cancel‘ value=‘"+JqueryDialog.cCancelText+"‘ type=‘button‘ onclick=‘JqueryDialog.Close();‘ /></span>");
  }
  if(isDrag){
   DragAndDrop.Register(_jd_dialog[0], _jd_dialog_m_h[0]);
  }
  $("#jd_iframe")[0].focus();
 },

init2:function(id_,dialogTitle, iframeSrc, iframeWidth, iframeHeight, isBottom, isDrag)
 {
  var _px_shadow = 5;
  var _px_top = 30;
  var _px_bottom = 50;
  if(!isBottom){
   _px_bottom = 0;
  }
  var _client_width = document.body.clientWidth;
  var _client_height = document.documentElement.scrollHeight; 
  /*if(typeof($("#jd_shadow")[0]) == "undefined")
  {
   $("body").prepend("<div id=‘jd_shadow‘>&nbsp;</div>");
   var _jd_shadow = $("#jd_shadow");
   _jd_shadow.css("width", _client_width + "px");
   _jd_shadow.css("height", _client_height + "px");
  }*/
  if(typeof($("#"+id_)[0]) != "undefined")
  { 
   $("#"+id_).remove();
  }
  $("body").prepend("<div id=‘"+id_+"‘ class=‘jd_dialog‘></div>");
  var _jd_dialog = $("#"+id_);
  _dragObjs = _jd_dialog;
  var _left = (_client_width - (iframeWidth + JqueryDialog.cBorderSize * 2 + JqueryDialog.cShdowRight)) / 2;
  _jd_dialog.css("left", (_left < 0 ? 0 : _left) + document.documentElement.scrollLeft + "px");
  var _top = (document.documentElement.clientHeight - (iframeHeight + JqueryDialog.cBorderSize * 2 + _px_top + _px_bottom + JqueryDialog.cShdowDown)) / 2;
  _jd_dialog.css("top", (_top < 0 ? 0 : _top) + document.documentElement.scrollTop + "px");
  _jd_dialog.append("<div id=‘"+ id_ +"_s‘ class=‘jd_dialog_s‘>&nbsp;</div>");
  var _jd_dialog_s = $("#"+ id_ +"_s");
  _jd_dialog_s.css("width", iframeWidth + JqueryDialog.cBorderSize * 2 + "px");
  _jd_dialog_s.css("height", iframeHeight + JqueryDialog.cBorderSize * 2 + _px_top + _px_bottom + "px");
  _jd_dialog_s.css("left", JqueryDialog.cShdowRight + "px");
  _jd_dialog_s.css("top", JqueryDialog.cShdowDown + "px");
  _jd_dialog.append("<div id=‘"+ id_ +"_m‘ class=‘jd_dialog_m‘></div>");
  var _jd_dialog_m = $("#"+ id_ +"_m");
  _jd_dialog_m.css("border", JqueryDialog.cBorderColor + " " + JqueryDialog.cBorderSize + "px solid");
  _jd_dialog_m.css("width", iframeWidth + "px");
  _jd_dialog_m.css("background-color", JqueryDialog.cBackgroundColor);
  _jd_dialog_m.append("<div id=‘"+ id_ +"_m_h‘ class=‘jd_dialog_m_h‘></div>");
  var _jd_dialog_m_h = $("#"+ id_ +"_m_h");
  _jd_dialog_m_h.css("background-color", JqueryDialog.cHeaderBackgroundColor);
  _jd_dialog_m_h.append("<span id=‘"+ id_ +"_m_h_l‘ class=‘jd_dialog_m_h_l‘>" + dialogTitle + "</span>");
  _jd_dialog_m_h.append("<span id=‘"+ id_ +"_m_h_r‘ class=‘jd_dialog_m_h_r‘ title=‘" + JqueryDialog.cCloseTitle
       + "‘ onclick=JqueryDialog.Close();>"
       + JqueryDialog.cCloseText + "</span>");
  _jd_dialog_m.append("<div id=‘"+ id_ +"_m_b‘ class=‘jd_dialog_m_b‘></div>");
  var _jd_dialog_m_b = $("#"+ id_ +"_m_b");
  _jd_dialog_m_b.css("width", iframeWidth + "px");
  _jd_dialog_m_b.css("height", iframeHeight + "px");
  _jd_dialog_m_b.append("<div id=‘"+ id_ +"_m_b_1‘ class=‘jd_dialog_m_b_1‘>&nbsp;</div>");
  var _jd_dialog_m_b_1 = $("#"+ id_ +"_m_b_1");
  _jd_dialog_m_b_1.css("top", "30px");
  _jd_dialog_m_b_1.css("width", iframeWidth + "px");
  _jd_dialog_m_b_1.css("height", iframeHeight + "px");
  _jd_dialog_m_b_1.css("display", "none");
  _jd_dialog_m_b.append("<div id=‘"+ id_ +"_m_b_2‘ class=‘jd_dialog_m_b_2‘></div>");
  var _jd_dialog_m_b_2 = $("#"+ id_ +"_m_b_2");
   $(_jd_dialog_m_b_2).append("<iframe id=‘jd_iframe‘ src=‘"+iframeSrc+"‘ scrolling=‘no‘ frameborder=‘0‘ width=‘"+iframeWidth+"‘ height=‘"+iframeHeight+"‘ />");
   if(isBottom){
    _jd_dialog_m.append("<div id=‘"+ id_ +"_m_t‘ class=‘jd_dialog_m_t‘ style=‘background-color:"+JqueryDialog.cBottomBackgroundColor+";‘></div>");
    var _jd_dialog_m_t = $("#"+ id_ +"_m_t");
    _jd_dialog_m_t.append("<span><input id=‘jd_submit‘ value=‘"+JqueryDialog.cSubmitText+"‘ type=‘button‘ onclick=‘JqueryDialog.Ok();‘ /></span>");
    _jd_dialog_m_t.append("<span class=‘jd_dialog_m_t_s‘><input id=‘jd_cancel‘ value=‘"+JqueryDialog.cCancelText+"‘ type=‘button‘ onclick=‘JqueryDialog.Close();‘ /></span>");
   }
   if(isDrag){
    DragAndDrop.Register(_jd_dialog[0], _jd_dialog_m_h[0]);
   }
   if(typeof($("#jd_iframe")[0]) != "undefined")
    $("#jd_iframe")[0].focus();
  },
  Close:function(){
   if(typeof($("#jd_shadow")[0]) != "undefined")
   {
    $("#jd_shadow").remove();
   }
   alert($(DragAndDrop.getObj()).attr("id"));
   if(typeof(_dragObjs[0]) != "undefined")
   {
    if(typeof($("#jd_iframe")[0]) != "undefined")
     $("#jd_iframe")[0].src = "";
    _dragObjs.remove();
   }
  },
  Close2:function(id_){  
   if(typeof(_dragObjs[0]) != "undefined")
   {
    $("#jd_iframe")[0].src = "";
    _dragObjs.remove();
   }
  },
  Ok:function(){
   var frm = $("#jd_iframe");
   frm[0].contentWindow.Ok();
   frm[0].focus();
  },
  SubmitCompleted:function(alertMsg, isCloseDialog, isRefreshPage)
  {
   if($.trim(alertMsg).length > 0 )
   {
    alert(alertMsg);
   }
   if(isCloseDialog){
    JqueryDialog.Close();
   }
   if(isRefreshPage){
    window.location.href = window.location.href;
   }
  },
  SubmitCompleted1:function(alertMsg, parentUrl)
  {
   if($.trim(alertMsg).length > 0 )
   {
    alert(alertMsg);
   }
   JqueryDialog.Close();
   window.location.href = parentUrl;
  }
 };
 var DragAndDrop = function(){
  var _clientWidth;
  var _clientHeight;
  var _controlObj;
  var _dragObj;
  var _dragObjs;
  var _mouseDown = false;
  var _dragObjCurrentLocation;
  var _mouseLastLocation;
  var getElementDocument = function(element)
  {
   return element.ownerDocument || element.document;
  };
  var dragMouseDownHandler = function(evt)
  {
   if(_dragObj)
   {
    evt = evt || window.event;
    _clientWidth = document.body.clientWidth;_clientHeight = document.documentElement.scrollHeight;    
    $("#"+ $(_dragObj).attr("id") +"_m_b_1").css("display", "");
    _mouseDown = true;
    _dragObjCurrentLocation = {x : $(_dragObj).offset().left,y : $(_dragObj).offset().top};
    _mouseLastLocation = {x : evt.screenX,y : evt.screenY};
    $(document).bind("mousemove", dragMouseMoveHandler);
    $(document).bind("mouseup", dragMouseUpHandler);
    if(evt.preventDefault){
     evt.preventDefault();
    }
    else{
     evt.returnValue = false;
    }
   }
  };
  var dragMouseMoveHandler = function(evt){ 
   if(_mouseDown)
   { 
    evt = evt || window.event;
    var _mouseCurrentLocation = {x : evt.screenX,y : evt.screenY};
    _dragObjCurrentLocation.x = _dragObjCurrentLocation.x + (_mouseCurrentLocation.x - _mouseLastLocation.x);
    _dragObjCurrentLocation.y = _dragObjCurrentLocation.y + (_mouseCurrentLocation.y - _mouseLastLocation.y);
    _mouseLastLocation = _mouseCurrentLocation;
    $(_dragObj).css("left", _dragObjCurrentLocation.x + "px");
    $(_dragObj).css("top", _dragObjCurrentLocation.y + "px");
    if(evt.preventDefault)
    {
     evt.preventDefault();
    }
    else{
     evt.returnValue = false;
    }
   }
  };
  var dragMouseUpHandler = function(evt)
  {
   if(_mouseDown)
   {
    evt = evt || window.event;
    $("#jd_dialog_m_b_1").css("display", "none");
    cleanMouseHandlers();
    _mouseDown = false;
   }
  };
  var cleanMouseHandlers = function()
  {
   if(_controlObj)
   {
    $(_controlObj.document).unbind("mousemove");
    $(_controlObj.document).unbind("mouseup");
   }
  };
  return {
   Register : function(dragObj, controlObj)
   {
    _dragObj = dragObj;
    _controlObj = controlObj;
    $(_controlObj).bind("mousedown", dragMouseDownHandler);
   },   
   getObj : function()
   {
    return _dragObj;
   }
  }
}();
//-->

时间： 2024-08-02 23:22:59

JqueryDialog非模式的弹出的相关文章

WPF 在MVVM模式下弹出子窗体的方式

主要是通过一个WindowManager管理类,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show方法,显示出来. WindowManager代码如下: public static class WindowManager { private static Hashtable _RegisterWindow = new Hashtable(); public static void Regiter<T>(st

360浏览器兼容模式无法弹出layer对话框问题

问题    Layer插件的提示框在极速模式下正常显示,但是兼容模式下不显示. 解决 360有俩模式(点击地址栏的闪电图标或者IE图标可以切换) 一个是基于Webkit内核的极速模式,一个是IE内核的兼容模式.     强制360以极速模式浏览网页,可以给此网页增加meta,强制360浏览器以极速模式解析此网页,而非IE兼容模式. <html><head><meta name="renderer" content="webkit">

Bootstrap入门（二十九）JS插件6：弹出框

加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script&

layer弹出层框架alert与msg详解

layer--->web弹层组件 代码: 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图: 1 layer.alert('墨绿风格,点击确认看深蓝', { 2 skin: 'layui-layer-molv' //样式类名 自定义样式 3 ,closeBtn: 1 // 是否显示关闭按钮 4 ,anim: 1 //动画类型 5 ,btn: ['

弹出一个非阻塞对话框（在程序关闭后 仍然显示对话框）

今天有个小需求, 程序要求执行一个检测操作, 如果检测失败的话则弹出信息并且关闭程序 由于检测代码是封装到一个独立进程里的, 所以直接使用TerminateProcess(GetCurrentProcess, 0);来关闭当前进程 可是在测试时却发现, 原本使用MessageBox来弹出消息却会阻塞结束进程的操作 一般我们在系统里弹出对话框都是调用Windows.MessageBox, 这个方法在一般情况下, 可以不阻塞本程序的操作(虽然在代码层面仍然是阻塞的) 大家可以用一个小例子试试 pro

控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() 另外还有window.open 方法,以及通过div来模拟弹出框效果的形式. window.open请自行百度,了解不深:div模拟的方式不适用与,弹出框中某些组件与父页面组件不相容的情况,如笔者所在项目,父页面中的jquery与整个网站js框架不相容(当然不是简单的可以通过替换$关键字来解决).所

SharePoint 2013 showModalDialog 弹出模式窗口

1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog  未定义的问题. function showDialog(title,url,width,height) { var options = { url:url, args: 7, title: title, dialogReturnValueCallback: dialogCallback }; if (width

弹出一个非阻塞对话框

今天有个小需求, 程序要求执行一个检测操作, 如果检测失败的话则弹出信息并且关闭程序 由于检测代码是封装到一个独立进程里的, 所以直接使用TerminateProcess(GetCurrentProcess, 0);来关闭当前进程 可是在测试时却发现, 原本使用MessageBox来弹出消息却会阻塞结束进程的操作 一般我们在系统里弹出对话框都是调用Windows.MessageBox, 这个方法在一般情况下, 可以不阻塞本程序的操作(虽然在代码层面仍然是阻塞的) 大家可以用一个小例子试试 pro

JavaScript弹出模式窗口

解决思路:         一般来说,显示在最前面的窗口都是因为窗口被激活获得焦点,要使窗口永远显示在最前面,可以人为的设置窗口在blur时立刻focus,或者用模式.无模式对话框实现.         具体步骤:         方法一:弹出窗口<body>里加上代码:onblur="self.focus()":        <body onblur="self.focus()">         方法二:用showModalDialog