htmlcss好看的提示框,div對(duì)話框,js+div+css實(shí)現(xiàn)好看的提示框效果

2023年12月6日發(fā)(作者：百代之過客)

-

htmlcss好看的提示框,div對(duì)話框,js+div+css實(shí)現(xiàn)好看的提示框

效果（轉(zhuǎn)）

div對(duì)話框,js+div+css實(shí)現(xiàn)好看的提示框效果(轉(zhuǎn))

(2012-02-18 20:46:23)

標(biāo)簽：

html

div

css

雜談

提示窗都越來越人性化了，呵呵，有的時(shí)候老板就和你要那么一個(gè)框，沒辦法，急的你焦頭爛額，怎么也不知道那個(gè)框框是怎么弄出來的，

確實(shí)，看似簡(jiǎn)單的一個(gè)提示框，背后寫的代碼卻有些復(fù)雜，今天周末我就抽時(shí)間把這個(gè)提示框功能加一個(gè)詳細(xì)的注釋發(fā)布上來，以供網(wǎng)友們

參考。

html代碼很簡(jiǎn)單了，在頁面里把下面這句粘上去

然后把這段js也粘上去，先看看效果。然后我在講解一些重要的代碼。

function sAlert(str)

{

var msgw,msgh,bordercolor;

msgw=300;//提示窗口的寬度

msgh=200;//提示窗口的高度

titleheight=25 //提示窗口標(biāo)題高度

bordercolor="#FF3C00";//提示窗口的邊框顏色

titlecolor="#D2CECE";//提示窗口的標(biāo)題顏色

var sWidth,sHeight;

//sWidth=Width; //得出當(dāng)前屏幕的寬

sWidth=Width;//BODY對(duì)象寬度

//sHeight=;//得到當(dāng)前屏幕的高

//sHeight=Height;//BODY對(duì)象高度

if (eight && MaxY)

{

sHeight = eight + MaxY;

}

el if (Height >

Height)

{sHeight = Height;

}

el

{

sHeight = Height;

}//以上得到整個(gè)屏幕的高

var bgObj=Element_x_x("div");//創(chuàng)建一個(gè)div對(duì)象

ribute('id','bgDiv');//可以用="bgDiv"的方法，是為div指定屬性值

on="absolute";//把bgDiv這個(gè)div絕對(duì)定位

="0";//頂部為0

ound="#777";//背景顏色

="progid:

(style=3,opacity=25,finishOpacity=75)";//i e瀏覽器透明度設(shè)置

y="0.6";//透明度(火狐瀏覽器中)

="0";//左邊為0

=sWidth + "px";//寬(上面得到的屏幕寬度)

=sHeight + "px";//高(上面得到的屏幕高度)

= "100";//層的z軸位置

Child(bgObj);

var msgObj=Element_x_x("div")//創(chuàng)建一個(gè)div對(duì)象

ribute("id","msgDiv");//可以用="msgDiv"的方法，是為div指定屬性值

ribute("align","center");//為div的align賦值

ound="white";//背景顏色為白色

="1px solid " +

bordercolor;//邊框?qū)傩裕伾谏厦嬉呀?jīng)賦值

on = "absolute";//絕對(duì)定位

= "35%";//從左側(cè)開始位置

= "30%";//從上部開始位置

="12px/1.6em Verdana, Geneva, Arial, Helvetica,

sans-rif";//字體屬性

//Left = "-225px";//左外邊距

//Top =

-75+Top+"px";//上外邊距

= msgw + "px";//提示框的寬(上面定義過) =msgh + "px";//提示框的高(上面定義過)

ign = "center";//文本位置屬性，居中。

ight ="25px";//行間距

= "101";//層的z軸位置

var title=Element_x_x("h4");//創(chuàng)建一個(gè)h4對(duì)象

ribute("id","msgTitle");//為h4對(duì)象填加標(biāo)題

ribute("align","right");//文字對(duì)齊方式

="0";//浮動(dòng)

g="3px";//浮動(dòng)

ound=titlecolor;//背景顏色

="progid:

(startX=20, startY=20, finishX=100,

finishY=100,style=1,opacity=75,finishOpacity=100); ";

y="0.75";//透明

//="1px solid " + bordercolor;//邊框

="25px";//高度

="12px Verdana, Geneva, Arial, Helvetica,

sans-rif";//字體屬性

="white";//文字顏色

="pointer";//鼠標(biāo)樣式

TML="

href="#">關(guān)閉

";//顯示的文字

title.οnclick=function()

{

Child(bgObj);//移除遮罩層

mentByIdx_xx_x("msgDiv").removeChild(t

itle);//在提示框中移除標(biāo)題

Child(msgObj);//移除提示框

}

Child(msgObj);//在body中畫出提示框?qū)?/p>

mentByIdx_xx_x("msgDiv").appendChild(t

itle);//在提示框中增加標(biāo)題

var txt=Element_x_x("p");="1em 0";//文本浮動(dòng)

ribute("id","msgTxt");//為p屬性增加id屬性

TML=str;//把傳進(jìn)來的值賦給p屬性

mentByIdx_xx_x("msgDiv").appendChild(t

xt);//把p屬性增加到提示框里

}

注釋我大概都加上了div+csscss，如果你有哪句不懂什么意思的，那只能說明你對(duì)js語法不是很了解，很簡(jiǎn)單，把代碼拿到百度上搜索一

下就明白什么意思了。

我這里講幾個(gè)重要的地方，第一：

//sHeight=;//得到當(dāng)前屏幕的高

//sHeight=Height;//BODY對(duì)象高度

if (eight && MaxY)

{

sHeight = eight + MaxY;

}

el if (Height >

Height)

{

sHeight = Height;

}

el

{

sHeight = Height;

}//以上得到整個(gè)屏幕的高

可以看到這個(gè)變量被賦了好幾次，開始我用的前面的賦值，但是后來發(fā)現(xiàn)，如果一旦屏幕太長(zhǎng)，出現(xiàn)滾動(dòng)條，上面的高度只是得出當(dāng)前屏幕

的高度，當(dāng)我們彈出對(duì)話框的時(shí)候底下的遮罩層，只在第一層遮罩，下面的都不管用，后來經(jīng)過仔細(xì)研究，寫出來

了下面那幾行判斷的代碼，這樣就可以把整個(gè)網(wǎng)頁都給遮罩上了。

當(dāng)把上面我們需要的屬性都設(shè)置好以后，就用這句代碼Child(bgObj);把第一個(gè)半透明遮罩層給輸出到屏幕上。

接下來又定義了一個(gè)div，然后還是一堆屬性的賦值，然后這兩句話很重要

Child(msgObj);//在body中畫出提示框?qū)?/p>

mentByIdx_xx_x("msgDiv").appendChild(t

itle);//在提示框中增加標(biāo)題

這是點(diǎn)擊關(guān)閉按鈕以后的處理代碼

title.οnclick=function()

{Child(bgObj);//移除遮罩層

mentByIdx_xx_x("msgDiv").removeChild(t

itle);//在提示框中移除標(biāo)題

Child(msgObj);//移除提示框

}

都很簡(jiǎn)單了，就是移除，關(guān)閉就行了。

分享：

喜歡

0

加載中，請(qǐng)稍候......

評(píng)論加載中，請(qǐng)稍候...

發(fā)評(píng)論

登錄名： 密碼： 找回密碼 注冊(cè)記住登錄狀態(tài)

昵 稱：

評(píng)論并轉(zhuǎn)載此博文

發(fā)評(píng)論

以上網(wǎng)友發(fā)言只代表其個(gè)人觀點(diǎn)，不代表新浪網(wǎng)的觀點(diǎn)或立場(chǎng)。

贈(zèng)金筆

-