[JavaScript]自定义MessageBox-白红宇

前言:

继上文()之后,我的工作是进一步增强一些IE所不能提供的东东.

还记得Windows下的MessageBox嘛?

IE呢?Alert?Confirm? 是不是好丑呢?

不过丑就算了,关键是还不好用.

本次的目标是,提供好看又好用的Web版的Windows MessageBox.(已测试,兼容IE和FF)

正文:

首先自然是先画好Html下的对话框样子了(用层来模拟):

画得不专业,先用着,反正后面可以通过css来调整.

接下来的工作就是需要通过Javascript动态输入这个层的内容.首先参考中的方式,代码虽然很多,不过只不过比多了几个层而已,大同小异:

KMessageBox =

{

name: "KMessageBox",

capiton : "消息框",

content: "提示消息",

msgbox :

null,

msgcaptioninfo:

null,

msgcontent:

null,

msgContenttxtmsg:

null,

msgbuttonyes:

null,

msbbuttonno:

null,

msgico:

null

};

KMessageBox.init =

function ()

{

var msgNameSpaceURI = "http://www.w3.org/1999/xhtml";

if(!msgContainerID)

{

var msgContainerID= "KMessageBox"; }

if(!msgCaptionID)

{

var msgCaptionID= "KMessageBox_caption"; }

if(!msgCaptionInfoID)

{

var msgCaptionInfoID = "KMessageBox_caption_info";}

if(!msgContentID)

{

var msgContentID = "KMessageBox_content"; }

if(!msgContentTxtID)

{

var msgContentTxtID= "KMessageBox_content_txt"; }

if(!msgContentTxtICOID)

{

var msgContentTxtICOID="KMessageBox_content_txt_ico"};

if(!msgContentTxtMsgID)

{

var msgContentTxtMsgID="KMessageBox_content_txt_msg"};

if(!msgButtons)

{

var msgButtonsID="KMessageBox_buttons"};

if(!msgButtonYes)

{

var msgButtonYesID="KMessageBox_buttons_yes"};

if(!msgButtonNo)

{

var msgButtonNoID="KMessageBox_buttons_no"};

if(!msgButtonOK)

{

var msgButtonOKID="KMessageBox_buttons_ok"};

var msgContainer = $(msgContainerID);

if(!msgContainer)

{

msgContainer = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div");

msgContainer.setAttribute("id", msgContainerID);

msgContainer.setAttribute("style","MARGIN: 0px auto; POSITION: absolute; TEXT-ALIGN: center;");

var msgCaption = $(msgCaptionID);

if(!msgCaption)

{

msgCaption = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaption.setAttribute("id",msgCaptionID);

Element.addClassName(msgCaption,"caption");

var msgCaptionInfo = $(msgCaptionInfoID);

if(!msgCaptionInfo)

{

msgCaptionInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaptionInfo.setAttribute("id",msgCaptionInfoID);

Element.addClassName(msgCaptionInfo,"info");

msgCaption.appendChild(msgCaptionInfo);

}

msgContainer.appendChild(msgCaption);

}

var msgContent = $(msgContentID);

if(!msgContent)

{

msgContent= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContent.setAttribute("id",msgContentID);

Element.addClassName(msgContent,"content");

var msgContentTxt = $(msgContentTxtID);

if(!msgContentTxt )

{

msgContentTxt = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContentTxt.setAttribute("id",msgContentTxtID);

Element.addClassName(msgContentTxt,"txt");

var msgContentTxtICO = $(msgContentTxtICOID);

if(!msgContentTxtICO)

{

msgContentTxtICO= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "img") : document.createElement("img") ;

msgContentTxtICO.setAttribute("id",msgContentTxtICOID);

msgContentTxtICO.setAttribute("src","icon_alarm.gif");

msgContentTxtICO.setAttribute("align","absMiddle");

msgContentTxtICO.setAttribute("style","height:52px;width:64px;background-image:url('icon_big_info.gif');");

msgContentTxt.appendChild(msgContentTxtICO);

}

var msgContentTxtMsg= $(msgContentTxtMsgID);

if(!msgContentTxtMsg)

{

msgContentTxtMsg= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "span") : document.createElement("span") ;

msgContentTxtMsg.setAttribute("id",msgContentTxtMsgID);

msgContentTxt.appendChild(msgContentTxtMsg);

}

var msgButtons = $(msgButtonsID);

if(!msgButtons)

{

msgButtons = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgButtons.setAttribute("id",msgButtonsID);

Element.addClassName(msgButtons,"btnlist");

var msgButtonYes = $(msgButtonYesID);

if(!msgButtonYes)

100

{

101

msgButtonYes= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

102

msgButtonYes.setAttribute("id",msgButtonYesID);

103

msgButtonYes.setAttribute("type","button");

104

msgButtonYes.setAttribute("value","YES");

105

Element.addClassName(msgButtonYes,"input_set");

106

107

msgButtons.appendChild(msgButtonYes);

108

}

109

110

var msgButtonNo = $(msgButtonNoID);

111

if(!msgButtonNo)

112

{

113

msgButtonNo= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

114

msgButtonNo.setAttribute("id",msgButtonNoID);

115

msgButtonNo.setAttribute("type","button");

116

msgButtonNo.setAttribute("value","NO");

117

Element.addClassName(msgButtonNo,"input_set");

118

119

msgButtons.appendChild(msgButtonNo);

120

121

}

122

123

var msgButtonOK= $(msgButtonOKID);

124

if(!msgButtonOK)

125

{

126

msgButtonOK= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

127

msgButtonOK.setAttribute("id",msgButtonOKID);

128

msgButtonOK.setAttribute("type","button");

129

msgButtonOK.setAttribute("value","OK");

130

Element.addClassName(msgButtonOK,"input_set");

131

132

msgButtons.appendChild(msgButtonOK);

133

134

}

135

136

137

msgContentTxt.appendChild(msgButtons);

138

}

139

140

msgContent.appendChild(msgContentTxt);

141

}

142

143

144

msgContainer.appendChild(msgContent);

145

}

146

147

document.getElementsByTagName("body").item(0).appendChild(msgContainer);

148

}

149

150

this.msgbox = $(

this.name);

151

this.msgcaptioninfo = $(msgCaptionInfoID);

152

this.msgContenttxtmsg= $(msgContentTxtMsgID);

153

this.msgbuttonyes = $(msgButtonYesID);

154

this.msgbuttonno = $(msgButtonNoID);

155

this.msgbuttonok = $(msgButtonOKID);

156

this.msgico = $(msgContentTxtICOID);

157

Element.hide(

this.msgbox);

158

159

}

160

161

接下来应该为MessageBox提供行为能力.我们需要模拟Confirm和Alert.

原始的Confrim需要返回false或者true来决定是否要运行postback事件.

在这里我转换了一下思路,不返回值,而是直接将postback事件的脚本(_doPostBack('',''))传入MessageBox,并绑定到相关的按钮上.所以我们的需要接受传入的参数主要有:消息标题,消息内容,按钮事件

OK,接下来构造Javascript中MessageBox的ShowConfirm函数:

KMessageBox.ShowConfirm =

function (imgdir,caption,msg,YesClick,NoClick)

{

if (!

this.msgbox )

return;

this.msgcaptioninfo.innerHTML = caption;

this.msgContenttxtmsg.innerHTML = msg;

为了提示消息前面的图片可以适应实际的相对位置,传入程序父目录,主要为封装为Server控件做准备

if(imgdir != "")

{

this.msgico.setAttribute("src",imgdir+"/kinnsoft_client/KMessageBox/icon_alarm.gif");

}

else

{

this.msgico.setAttribute("src","/kinnsoft_client/KMessageBox/icon_alarm.gif");

}

使用prototype类库

Element.show(

this.msgbox);

Element.show(

this.msgbuttonyes);

Element.show(

this.msgbuttonno);

Element.hide(

this.msgbuttonok);

var x=0,y=0;

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

y = (document.documentElement.scrollTop || document.body.scrollTop);

/**/

一下这段这么复杂的处理方法,是为了符合最新web标准,因为在aspx页面中会默认加入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

新的标准中不支持document.body.clientHeight 属性,它是MSIE所有的

var theWidth=0,theHeight=0;

if (window.innerWidth)

{

theWidth = window.innerWidth

theHeight = window.innerHeight

}

else

if (document.documentElement && document.documentElement.clientWidth)

{

theWidth = document.documentElement.clientWidth

theHeight = document.documentElement.clientHeight

}

else

if (document.body)

{

theWidth = document.body.clientWidth

theHeight = document.body.clientHeight

}

做div居中处理

this.msgbox.style.left = (theWidth -

this.msgbox.offsetWidth)/2+x;

this.msgbox.style.top = (theHeight -

this.msgbox.offsetHeight)/2+y;

绑定传入的事件

this.msgbuttonyes.onclick = YesClick;

function(){ alert('yes');};

this.msgbuttonno.onclick = NoClick;

绑定隐藏div的事件,使用prototype类库

Event.observe(

this.msgbuttonyes,"click",

function()

{KMessageBox.Hide();},

true);

Event.observe(

this.msgbuttonno,"click",

function()

{KMessageBox.Hide();},

true);

}

有了显示还需要做隐藏处理,即上面调用的KMessageBox.Hide();

KMessageBox.Hide =

function()

{

if (!

this.msgbox )

return;

Element.hide(

this.msgbox);

detach 事件,防止IE 内存泄漏

Event.stopObserving(

this.msgbuttonyes,"click",

function()

{KMessageBox.Hide();},

true)

Event.stopObserving(

this.msgbuttonno,"click",

function()

{KMessageBox.Hide();},

true)

Event.stopObserving(

this.msgbuttonok,"click",

function()

{KMessageBox.Hide();},

true)

}

至于模拟Alert,就可以模仿ShowConfirm来做了,so easy

ok,整个MessageBox 类看起来已经像模像样了.运行一下...

噫,不对,好像缺了点什么....没错,它不是ShowModal类型的...用户还可以任意点下面的页面元素.

这个怎么模拟?

当然还是div了...做一个整个页面大小的div覆盖在所有页面元素之上,MessageBox层之下.

不过有个弊端,div不能覆盖select控件,那只好搬出iframe了..所谓道高一尺魔高一丈

function DialogModal()

{

this.blankImgHandle =

null;

this.tags =

new Array("applet", "iframe", "select","object","embed");

}

DialogModal.Show =

function()

{

debugger;

var NameSpaceURI = "http://www.w3.org/1999/xhtml";

this.blankImgHandle = document.createElementNS ? document.createElementNS(NameSpaceURI, "iframe") : document.createElement("iframe") ;

iframe

this.blankImgHandle.setAttribute("id","blankImgHanldle");

with (

this.blankImgHandle.style)

{

position = "absolute";

left = 0;

top = (document.documentElement.scrollTop || document.body.scrollTop);

height = "100%"; //这边用100%在标准生成的aspx页面好像比起效果,去掉doctype那句就可以,所以我直接设置一个分辨率即1024X768

width = "100%";

zIndex = "9999"; //这个zIndex比页面所有元素大,但是要比MessageBox小,保证MessageBox 不被罩住

filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=40)";

opacity = "0.1";

}

document.getElementsByTagName("body").item(0).appendChild(

this.blankImgHandle);

}

DialogModal.Close =

function()

{

if (

this.blankImgHandle)

{

Element.remove(

this.blankImgHandle);

this.blankImgHandle =

null;

}

};

在MessageBox中Show的时候,调用DialogModal.Show,Hide的时候调用DialogModal.Hide 即ok了.

有了上面的两个Javascript类,我们就可以很好的做服务端的封装了,取到control的dopostback函数,直接传入给ShowConfrim就可以了.

ShowConfirm客户端事件

private

string JS_CONFIRM = "KMessageBox.ShowConfirm('{0}','{1}','{2}',{3},{4});return false;";

获取DoPostBack事件,这边还有个难点,怎么取得客户端验证事件,目前我还没有解决

strOnClickScript = "function(){" + Page.ClientScript.GetPostBackEventReference(control, "") + ";}";

注册MessageBox事件,

control.Attributes["onclick"] +=

string.Format(JS_CONFIRM,

this.mImgDir, caption, content, strOnClickScript, "function(){}");

源码:

代码插入比较慢,而且经常ShowDialogModal框不返回,晕死.....直接down吧:

KMessageBox.js

KMessageBox =

{

name: "KMessageBox",

capiton : "消息框",

content: "提示消息",

msgbox :

null,

msgcaptioninfo:

null,

msgcontent:

null,

msgContenttxtmsg:

null,

msgbuttonyes:

null,

msbbuttonno:

null,

msgico:

null

};

KMessageBox.init = function ()

{

var msgNameSpaceURI = "http://www.w3.org/1999/xhtml";

if(!msgContainerID)

{ var msgContainerID= "KMessageBox"; }

if(!msgCaptionID)

{ var msgCaptionID= "KMessageBox_caption"; }

if(!msgCaptionInfoID)

{var msgCaptionInfoID = "KMessageBox_caption_info";}

if(!msgContentID)

{ var msgContentID = "KMessageBox_content"; }

if(!msgContentTxtID)

{ var msgContentTxtID= "KMessageBox_content_txt"; }

if(!msgContentTxtICOID)

{var msgContentTxtICOID="KMessageBox_content_txt_ico"};

if(!msgContentTxtMsgID)

{var msgContentTxtMsgID="KMessageBox_content_txt_msg"};

if(!msgButtons)

{var msgButtonsID="KMessageBox_buttons"};

if(!msgButtonYes)

{var msgButtonYesID="KMessageBox_buttons_yes"};

if(!msgButtonNo)

{var msgButtonNoID="KMessageBox_buttons_no"};

if(!msgButtonOK)

{var msgButtonOKID="KMessageBox_buttons_ok"};

var msgContainer = $(msgContainerID);

if(!msgContainer)

{

msgContainer = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div");

msgContainer.setAttribute("id", msgContainerID);

msgContainer.setAttribute("style","MARGIN: 0px auto; POSITION: absolute; TEXT-ALIGN: center;");

var msgCaption = $(msgCaptionID);

if(!msgCaption)

{

msgCaption = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaption.setAttribute("id",msgCaptionID);

Element.addClassName(msgCaption,"caption");

var msgCaptionInfo = $(msgCaptionInfoID);

if(!msgCaptionInfo)

{

msgCaptionInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaptionInfo.setAttribute("id",msgCaptionInfoID);

Element.addClassName(msgCaptionInfo,"info");

msgCaption.appendChild(msgCaptionInfo);

}

msgContainer.appendChild(msgCaption);

}

var msgContent = $(msgContentID);

if(!msgContent)

{

msgContent= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContent.setAttribute("id",msgContentID);

Element.addClassName(msgContent,"content");

var msgContentTxt = $(msgContentTxtID);

if(!msgContentTxt )

{

msgContentTxt = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContentTxt.setAttribute("id",msgContentTxtID);

Element.addClassName(msgContentTxt,"txt");

var msgContentTxtICO = $(msgContentTxtICOID);

if(!msgContentTxtICO)

{

msgContentTxtICO= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "img") : document.createElement("img") ;

msgContentTxtICO.setAttribute("id",msgContentTxtICOID);

msgContentTxtICO.setAttribute("src","icon_alarm.gif");

msgContentTxtICO.setAttribute("align","absMiddle");

msgContentTxtICO.setAttribute("style","height:52px;width:64px;background-image:url('icon_big_info.gif');");

msgContentTxt.appendChild(msgContentTxtICO);

}

var msgContentTxtMsg= $(msgContentTxtMsgID);

if(!msgContentTxtMsg)

{

msgContentTxtMsg= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "span") : document.createElement("span") ;

msgContentTxtMsg.setAttribute("id",msgContentTxtMsgID);

msgContentTxt.appendChild(msgContentTxtMsg);

}

var msgButtons = $(msgButtonsID);

if(!msgButtons)

{

msgButtons = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgButtons.setAttribute("id",msgButtonsID);

Element.addClassName(msgButtons,"btnlist");

var msgButtonYes = $(msgButtonYesID);

if(!msgButtonYes)

100

{

101

msgButtonYes= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

102

msgButtonYes.setAttribute("id",msgButtonYesID);

103

msgButtonYes.setAttribute("type","button");

104

msgButtonYes.setAttribute("value","YES");

105

Element.addClassName(msgButtonYes,"input_set");

106

107

msgButtons.appendChild(msgButtonYes);

108

}

109

110

var msgButtonNo = $(msgButtonNoID);

111

if(!msgButtonNo)

112

{

113

msgButtonNo= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

114

msgButtonNo.setAttribute("id",msgButtonNoID);

115

msgButtonNo.setAttribute("type","button");

116

msgButtonNo.setAttribute("value","NO");

117

Element.addClassName(msgButtonNo,"input_set");

118

119

msgButtons.appendChild(msgButtonNo);

120

121

}

122

123

var msgButtonOK= $(msgButtonOKID);

124

if(!msgButtonOK)

125

{

126

msgButtonOK= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

127

msgButtonOK.setAttribute("id",msgButtonOKID);

128

msgButtonOK.setAttribute("type","button");

129

msgButtonOK.setAttribute("value","OK");

130

Element.addClassName(msgButtonOK,"input_set");

131

132

msgButtons.appendChild(msgButtonOK);

133

134

}

135

136

137

msgContentTxt.appendChild(msgButtons);

138

}

139

140

msgContent.appendChild(msgContentTxt);

141

}

142

143

144

msgContainer.appendChild(msgContent);

145

}

146

147

document.getElementsByTagName("body").item(0).appendChild(msgContainer);

148

}

149

150

this.msgbox = $(

this.name);

151

this.msgcaptioninfo = $(msgCaptionInfoID);

152

this.msgContenttxtmsg= $(msgContentTxtMsgID);

153

this.msgbuttonyes = $(msgButtonYesID);

154

this.msgbuttonno = $(msgButtonNoID);

155

this.msgbuttonok = $(msgButtonOKID);

156

this.msgico = $(msgContentTxtICOID);

157

Element.hide(

this.msgbox);

158

159

}

160

161

KMessageBox.ShowConfirm = function (imgdir,caption,msg,YesClick,NoClick)

{

162

163

if (!

this.msgbox )

return;

164

alert(document.body.style.overflowY);

165

DialogModal.Show();

166

167

this.msgcaptioninfo.innerHTML = caption;

168

this.msgContenttxtmsg.innerHTML = msg;

169

if(imgdir != "")

170

{

171

this.msgico.setAttribute("src",imgdir+"/kinnsoft_client/KMessageBox/icon_alarm.gif");

172

}

173

else

174

{

175

this.msgico.setAttribute("src","/kinnsoft_client/KMessageBox/icon_alarm.gif");

176

}

177

178

Element.show(

this.msgbox);

179

Element.show(

this.msgbuttonyes);

180

Element.show(

this.msgbuttonno);

181

Element.hide(

this.msgbuttonok);

182

183

var x=0,y=0;

184

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

185

y = (document.documentElement.scrollTop || document.body.scrollTop);

186

187

var theWidth=0,theHeight=0;

188

189

if (window.innerWidth)

190

{

191

theWidth = window.innerWidth

192

theHeight = window.innerHeight

193

}

194

else

if (document.documentElement && document.documentElement.clientWidth)

195

{

196

theWidth = document.documentElement.clientWidth

197

theHeight = document.documentElement.clientHeight

198

}

199

else

if (document.body)

200

{

201

theWidth = document.body.clientWidth

202

theHeight = document.body.clientHeight

203

}

204

205

this.msgbox.style.left = (theWidth -

this.msgbox.offsetWidth)/2+x;

206

this.msgbox.style.top = (theHeight -

this.msgbox.offsetHeight)/2+y;

207

208

this.msgbuttonyes.onclick = YesClick;

function(){ alert('yes');};

209

this.msgbuttonno.onclick = NoClick;

210

211

Event.observe(

this.msgbuttonyes,"click",function()

{KMessageBox.Hide();},

true);

212

Event.observe(

this.msgbuttonno,"click",function()

{KMessageBox.Hide();},

true);

213

}

214

215

KMessageBox.ShowInfo = function (imgdir,caption,msg)

{

216

217

if (!

this.msgbox )

return;

218

DialogModal.Show();

219

220

if(imgdir != "")

221

{

222

this.msgico.setAttribute("src",imgdir+"/kinnsoft_client/KMessageBox/icon_big_info.gif");

223

}

224

else

225

{

226

this.msgico.setAttribute("src","/kinnsoft_client/KMessageBox/icon_big_info.gif");

227

}

228

229

this.msgcaptioninfo.innerHTML = caption;

230

this.msgContenttxtmsg.innerHTML = msg;

231

Element.show(

this.msgbox);

232

Element.show(

this.msgbuttonok);

233

Element.hide(

this.msgbuttonyes);

234

Element.hide(

this.msgbuttonno);

235

236

var x=0,y=0;

237

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

238

y = (document.documentElement.scrollTop || document.body.scrollTop);

239

240

var theWidth=0,theHeight=0;

241

242

if (window.innerWidth)

243

{

244

theWidth = window.innerWidth

245

theHeight = window.innerHeight

246

}

247

else

if (document.documentElement && document.documentElement.clientWidth)

248

{

249

theWidth = document.documentElement.clientWidth

250

theHeight = document.documentElement.clientHeight

251

}

252

else

if (document.body)

253

{

254

theWidth = document.body.clientWidth

255

theHeight = document.body.clientHeight

256

}

257

258

this.msgbox.style.left = (theWidth -

this.msgbox.offsetWidth)/2+x;

259

this.msgbox.style.top = (theHeight -

this.msgbox.offsetHeight)/2+y;

260

261

262

Event.observe(

this.msgbuttonok,"click",function()

{KMessageBox.Hide();},

true);

263

}

264

265

266

KMessageBox.Hide = function()

267

{

268

if (!

this.msgbox )

return;

269

Element.hide(

this.msgbox);

270

DialogModal.Close();

271

Event.stopObserving(

this.msgbuttonyes,"click",function()

{KMessageBox.Hide();},

true)

272

Event.stopObserving(

this.msgbuttonno,"click",function()

{KMessageBox.Hide();},

true)

273

Event.stopObserving(

this.msgbuttonok,"click",function()

{KMessageBox.Hide();},

true)

274

}

275

276

277

function DialogModal()

{

278

this.blankImgHandle =

null;

279

this.tags =

new Array("applet", "iframe", "select","object","embed");

280

}

281

282

283

DialogModal.Show = function()

284

{

285

debugger;

286

var NameSpaceURI = "http://www.w3.org/1999/xhtml";

287

this.blankImgHandle = document.createElementNS ? document.createElementNS(NameSpaceURI, "iframe") : document.createElement("iframe") ;

iframe

288

this.blankImgHandle.setAttribute("id","blankImgHanldle");

289

with (

this.blankImgHandle.style)

{

290

position = "absolute";

291

left = 0;

292

top = (document.documentElement.scrollTop || document.body.scrollTop);

293

height = "100%";

294

width = "100%";

295

zIndex = "9999";

296

filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=40)";

297

opacity = "0.1";

298

}

299

300

document.getElementsByTagName("body").item(0).appendChild(

this.blankImgHandle);

301

}

302

303

DialogModal.Close = function()

{

304

if (

this.blankImgHandle)

305

{

306

Element.remove(

this.blankImgHandle);

307

this.blankImgHandle =

null;

308

}

309

};

310

311

312

Event.observe(window, 'load', function(e)

{KMessageBox.init();},

false);

313

Event.observe(window, 'unload', Event.unloadCache,

false);

KMessageBox.css

#KMessageBox

{

}{

margin:

0px auto;

width :

398px;

height:

188px;

border:

1px solid #498AC2;

font-size:

9pt;

position:

absolute;

z-index:

10000 ;

}

#KMessageBox .caption

{

}{

font-family:

'tahoma';

font-size:

8pt;

background:

#45A0EE url('alter_bar.gif') no-repeat;

height:

28px;

text-align:

left;

}

#KMessageBox .info

{

}{

float:

left;

color:

#fff;

font-weight:

bold;

margin:

8px 0 0 8px;

}

#KMessageBox .content

{

}{

font-family:

'tahoma';

font-size:

8pt;

width:

396px;

word-break:

break-all;

height:

157px;

border:

1px solid #fff;

background:

#fff url('alter_bg.gif') repeat-x;

}

#KMessageBox .txt

{

}{

margin-top:

25px;

text-align:

center;

color:

#327FC6;

padding:

0 12px;

line-height:

22px;

}

.txt

{

}{

font-family:

tahoma;

font-size:

11px;

font-weight:

normal;

}

img

{

}{

border:

#KMessageBox .btnlist

{

}{

margin-top:

30px;

text-align:

center;}

#KMessageBox .input_set

{

}{

border-style:

none;

border-color:

inherit;

border-width:

font-size:

9pt;

width:

63px;

height:

22px;

background:

url('compose.gif') no-repeat -154px -22px;

}

.input_set

{

}{

width:

50%;

height:

17px!important;

height :

21px;

border:

1px solid #7F9DB9;

padding:

3px 2px 0 2px!important;

padding

/**/

/**/:

3px 2px 1px 2px;

color:

#494949;

}

.input_Alist

{

}{

border-style :

none;

border-color:

inherit;

border-width:

width:

85px;

height:

22px;

background:

#fff url('input_bg_alist.gif') no-repeat;

float:

left;

}

分类: ,

本文转自浪子博客园博客，原文链接：http://www.cnblogs.com/walkingboy/archive/2006/08/10/Cilent_KMessageBox.html，如需转载请自行联系原作者