高分求!!!div仿showModalDialog 弹出窗口代码

ControlToolkits 的 ModalPopup http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

http://www.consulenza-web.com/jquery_plugins/xwin.html
自己研究下吧, 可能对你有用, 顺便说一句, showModalDialog 这个也可以呀, 不一定非要使用DIV

showModalDialog浏览器有的不支持，我的操作也不好办，有的错误，

//判断浏览器，如果是ie  isIe=true;
var isIe=(document.all)?true:false;

/*
*设置名字为select的对象的所有样式是否可用
* state ---是否可以见
**/
function setSelectState(state) {
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++) {
objl[i].style.visibility=state;
}
}
/*
*获取对象的坐标值
*
***/
function mousePosition(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
};
}

/*
*弹出层的方法
* wTitle  ---层的标题
* content ---层内的内容
* pos     ---坐标对象
* wWidth  ---层的宽度
*/
function showMessageBox(wTitle,content,pos,wWidth) {
closeWindow();
//获取游览器的可视区域宽与高
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
//alert(bWidth+"___"+bHeight);

//设置可见度
if(isIe){
setSelectState('hidden');
}
//创建弹出层的背景div
var back=document.createElement("div");
//设置背景div的id
back.id="back";
//样式字符串
var styleStr="top:0px;left:0px;position:absolute;background:#003973;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
//给背景div设置样式
back.style.cssText=styleStr;
//将背景div加入到body中
document.body.appendChild(back);
//调用让背景渐渐变暗的方法
//showBackground(back,50); ----------------------------------------调用让背景渐渐变暗的方法

//创建消息层
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><img src='images/closeImg.gif' onClick='closeWindow();' alt='关闭'/></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
//添加到body中
document.body.appendChild(mesW);
}

// /*
// *让背景渐渐变暗
// * obj ---背景层对象
// * endInt ---变暗效果的参数
// **/
// function showBackground(obj,endInt) {
// if(isIe) {
// obj.filters.alpha.opacity+=1;
// if(obj.filters.alpha.opacity<endInt) {
// setTimeout(function(){showBackground(obj,endInt)},5);
// }
// }else{
// var al=parseFloat(obj.style.opacity);al+=0.01;
// obj.style.opacity=al;
// if(al<(endInt/100)) {
// setTimeout(function(){showBackground(obj,endInt)},5);
// }
// }
// }

//关闭窗口
function closeWindow() {
if(document.getElementById('back')!=null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}

if(isIe){
setSelectState('');
}
}
页面代码
<html><head>
<script src="js/message.js" language="javascript" type="text/javascript"></script>
<script>
    function test()
    {
        alert(document.getElementById("Text1").value);
    }
//测试弹出
function testMessageBox(ev){
//获取时间对象的坐标
var objPos = mousePosition(ev);
messContent="<div style='padding:10px;text-align:left; line-height:220%;'><input id='Text1' type='text' onclick='test()'/>用户名密码错误</div>";
showMessageBox('动态标题',messContent,objPos,500);
}
    </script>
<link href="css/message.css" type="text/css" rel="stylesheet"/>
</head>
<body>
        <input id="btnOK" type="button" value="确  定"/>
<a href="#" onClick="testMessageBox(event);">就把内容方里面效果</a>
</body>
</html>css：
.mesWindow{
border:#666 1px solid;
background:#eaf4fe;
margin-top:50px;
margin-left:40px;
}
.mesWindowTop{
background:url(../images/top.gif);
border-bottom:#eee 1px solid;
/*margin-left:4px;*/
padding:3px;
font-weight:bold;
text-align:left;
font-size:12px;
}
.mesWindowContent{
margin:8px;
font-size:12px;
}
.mesWindow .close{
height:15px;
width:28px;
border:none;
cursor:pointer;
text-decoration:underline;
background:#fff
}

我知道有个很棒的jQuery插件。
弹出本页的一个div.
关于取得，我已经做好了。请看：
http://blog.csdn.net/greatverve/archive/2008/12/24/3594665.aspx

var divdialogmanager = {
    create: function(callname,model);//参数设置对话框样式和其它参数约定
     show : function(callname);//窗口名
     hidden : function(callname);隐藏但不关闭,实现这个可让交互没有拖拉感
     close:function(callname);关闭,类似窗体关闭,这里要手动释放你创建的资源（内存）/容易造成内存泄漏
     manager : object//实现多窗口管理,如果单窗口，就没必要实现//本人做MDI样式。。所以实现了多窗口管理
}
Div显示
一模式对话框，
    1 要求实现一个div zIndex 大于当前页面的最大zIndex
    2 对话框,要求实现一个div zIndex 大于背景对话框，切内嵌入iframe
二非模式实现：
   仅实现模式对话框2。父子访问：
子访问父：window.parent.{method or objectname and method)//like : window.parent.myDivDialog.close();
父访问子：要求从divdialogmanager可以获取当前iframe的contextWindow对象
例如 divdialogmanager.getWindow(callname).childWindowObject.method();另外建议还要追加一个不内嵌iframe的实现，即内部直接嵌入 html代码的

var styleStr="top:0px;left:0px;position:absolute;background:#003973;width:"+bWidth+"px;height:"+bHeight+"px;";
想控制父窗体把这个background:#003973 的颜色换成白色也就是没背景色就行了

楼主的意思是不是用Div做一个弹出层的效果啊？
如下：<script language="javascript" type="text/javascript">
String.prototype.len=function(){
return this.replace(/[^\x00-\xff]/g,"**").length;
}
function CheckLength(source , massage)
{
    var txtsource = document.getElementById(source);
       var  lblmassage  = document.getElementById(massage);
    var ValidStrLength=200;
     if (txtsource.value.length<= ValidStrLength)
        {
             hideScreen('" + divMessage.ClientID + "','" + divScreen.ClientID + "','" + txtReason.ClientID + "');
             lblmassage.style.display = 'none';
             return true;
         }
         else
         {
              lblmassage.style.display = 'inline';
              return false;
         }
}
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
return {top:top,left:left,height:height,width:width};
}
function getWidth()
{
    var strWidth,clientWidth,bodyWidth;
    clientWidth = document.documentElement.clientWidth;
    bodyWidth = document.body.clientWidth;
    if(bodyWidth > clientWidth){
        strWidth = bodyWidth ;
    } else {
        strWidth = clientWidth;
    }
    return strWidth ;
}
function getHeight()
{
    var strHeight,clientHeight,bodyHeight;
    clientHeight = document.documentElement.clientHeight;
    bodyHeight = document.body.clientHeight;
    if(bodyHeight > clientHeight){
        strHeight = bodyHeight ;
    } else {
        strHeight = clientHeight;
    }
    return strHeight ;
}
function showScreen(Message , Screen, MsgBoxID , MsgBoxValue)
{
  var msgBox  = document.getElementById(MsgBoxID);
  //alert();
  msgBox.innerHTML = MsgBoxValue;
    var Msg = document.getElementById(Message);
    var Bg = document.getElementById(Screen);
   var bgWidth=  getWidth();
   var bgheight = getHeight();
//document.getElementById('Message').style.left=(document.body.clientWidth/2)-200+"px"; // alert(screen.height/2-240);
//document.getElementById('Message').style.top=screen.height/2-240+"px";
    Msg.style.display = 'inline';
    Bg.style.display = 'inline';
//hidden_select();
var height = 200;
var width = 400;
var Position = getPosition();
topadd = (Position.height-height)/2;
leftadd = (Position.width-width)/2;
Msg.style.top = (Position.top + topadd) + "px";
    Msg.style.left = (Position.left + leftadd) + "px";
    Bg.style.width = bgWidth+'px';
    Bg.style.height = bgheight+'px';
window.onscroll = function (){
var Position = getPosition();
Msg.style.top = (Position.top + topadd) +"px";
Msg.style.left = (Position.left + leftadd) + "px";
Bg.style.width = bgWidth+'px';
    Bg.style.height = bgheight+'px';
};
window.onresize = function (){
var Position = getPosition();
Msg.style.top = (Position.top + topadd) +"px";
Msg.style.left = (Position.left + leftadd) + "px";
Bg.style.width = bgWidth+'px';
    Bg.style.height = bgheight+'px';
};
return false;
}
function hideScreen(Message , Screen)
{
    var Msg = document.getElementById(Message);
    var Bg = document.getElementById(Screen);
    Msg.style.display = 'none';
    Bg.style.display = 'none';
show_select();
}
function hidden_select(){
var selectlist=document.getElementsByTagName("select");
    for(var i=0;i<selectlist.length;i++){
        selectlist[i].style.display = 'none';
    }
}
function show_select(){
var selectlist=document.getElementsByTagName("select");
for(var i=0;i<selectlist.length;i++){
    selectlist[i].style.display = 'inline';
    }
}
</script>
<div id="divMessage" class="Message" style="width: 400px;  text-align: center" runat="server">
    <table width="100%" class="greadviewlist2" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th style="text-align: left; background-color:#fde684;padding:10px;">
                <asp:Label ID="Label2" runat="server" Text="<%$ Resources:JmcShareDataResource,ReDetail %>"></asp:Label>
            </th>
            <th style="text-align: right;background-color:#fde684;">
                <label id="cli" style="cursor: pointer; padding-right: 10px;" onclick="javascript:hideScreen('<%=divMessage.ClientID %>','<%=divScreen.ClientID %>');">
                    <%= Resources.JmcPersonalSpaceResource.Dis_PersonalInfoApplyJobbtnApplyJob_Close%></label>
            </th>
        </tr>
        <tr>
            <td align="left" colspan="2" style="background-color:#ffffff; vertical-align:top; padding:10px" >
                <label id="txtReason" runat="server" style="width: 200px">
                </label>
            </td>
        </tr>
    </table>
</div>
<div id="divScreen" class="Screen" runat="server">
</div>
比如你是点击某一个hyperLink调用这个层的：
hlRe.Attributes.Add("onclick", "return showScreen('" + divMessage.ClientID + @"','" + divScreen.ClientID + @"','" + txtReason.ClientID + @"','" + CommonFunc.ReplaceTagChar(hlRe.NavigateUrl) + @"')");
hlRe.NavigateUrl = Request.Url.PathAndQuery + @"#1=1";差不多就是这样子的，楼主你对着你的程序再进行相应的一些修改，应该可以实现的

div可以!
微软的AJAX下的ModalPopupExtender控件更容易!!

我给你个类，那个去直接用就可以，弹出窗口想在winform中使用的一样，别忘记了给我加分哦！
其实弹出窗口的方法很多，这只是其中一种的，而且页面不刷新，很棒：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
/// <summary>
/// MessageBox 的摘要说明
/// </summary>
public class MessageBox : System.Web.UI.Page
{
    public MessageBox()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    public static void Show(System.Web.UI.Page page, string msg)
    {     page.ClientScript.RegisterStartupScript(page.GetType(), "message", "<script language='javascript' defer>alert('" + msg.ToString() + "');</script>");    }

    public static void ShowAndRedirect(System.Web.UI.Page page, string msg, string url)
    {
        StringBuilder Builder = new StringBuilder();

        Builder.Append("<script language='javascript' defer>");
        Builder.AppendFormat("alert('{0}');", msg);
        Builder.AppendFormat("self.location.href='{0}'", url);
        Builder.Append("</script>");
        page.ClientScript.RegisterStartupScript(page.GetType(), "message", Builder.ToString());    }
    /// <summary>
    /// 控件点击消息确认提示框
    /// </summary>
    /// <param name="page">当前页面指针，一般为this</param>
    /// <param name="msg">提示信息</param>
    public static void ShowConfirm(System.Web.UI.WebControls.WebControl Control, string msg)
    {
        //Control.Attributes.Add("onClick","if (!window.confirm('"+msg+"')){return false;}");
        Control.Attributes.Add("onclick", "return confirm('" + msg + "');");
    }
    /// <summary>
    /// 信息提示
    /// </summary>
    /// <param name="mess"></param>
    //public virtual void Alert(string mess)
    //{
    //    ClientScript.RegisterStartupScript(this.GetType(), "Alert", "<script language = javascript>alert(\"提示:" + mess.Replace("\r\n", "") + "\")</script>");
    //}
}
在WEB页面里面用的时候就是这样写：MessageBox.Show(this,"提示信息");

window.open("a.html",width=?? height=?? ...)
弹出一个小网页

调试易

高分求!!!div仿showModalDialog 弹出窗口代码

解决方案 »