css設置的js對話框（js 選擇文件對話框）

本文目錄一覽：

• 1、怎樣用 CSS + JS 美化網頁中的 select 下拉框
• 2、筆記：JS設置CSS樣式的幾種方式
• 3、怎麼用div+css和js製作回復窗口
• 4、如何用JS點擊超鏈接彈出對話框
• 5、請教怎樣用CSS設置滑鼠指向彈出對話框
• 6、CSS+JS更改alert的默認對話框

怎樣用 CSS + JS 美化網頁中的 select 下拉框

這個可以換種方式實現，首先select的樣式每個瀏覽器都有其默認的樣式，需要先去除這些默認樣式，其次，select裡面的樣式諸如箭頭，下拉框等等的樣式，這裡提供一種思路，就是在select的外層添加一個div，對這個div元素設置樣式，select元素則是沒樣式，從而達到一種掩眼法的效果，實現方式如下：

!– html 布局 —

div id=”selectStyle”

 select id=”select”

  optionoption 1/option

  optionoption 2/option

  optionoption 3/option

  optionoption 4/option

  optionoption 5/option

 /select

/div

首先要去掉 #select 的默認樣式：

/* 去掉默認樣式，設置新的樣式 */

#select{

display:block;

width:100%;

height:100%;

box-sizing:border-box;

background:none;

border:1px solid #222;

outline:none;

-webkit-appearance:none;

padding:0 5px;

line-height:inherit;

color:inherit;

cursor:default;

font-size:14px;

position:relative;

z-index:3;

}

#select option{

color:#222;

}

#select option:hover{

color:#fff;

}

#select option:checked{

background:#535353;

color:#fff; 

}

然後在外層div#selectStyle設置自定義樣式

#selectStyle{

display:block;

margin:0 auto;

overflow:hidden;

height:30px;

width:240px;

border-radius:0;

background:#535353 url(“箭頭圖片地址”) right center no-repeat;

background-size:auto 80%;

color:#fff;

line-height:2;

/* 如果不想加圖片，

   則可以設置一個自己的三角形樣式，

   如下的自定義方式，

   見代碼1 */

position:relative;

z-index:1;

}

/* 代碼1 */

#selectStyle:before{

position:absolute;

z-index:1;

top:50%;

right:10px;

margin-top:-2.5px;

display:block;

width:0;

height:0;

border-style:solid;

border-width:5px 5px 0 5px;

border-color:#fff transparent transparent transparent;

content:””;

}

/* 代碼1 */

#selectStyle:after{

position:absolute;

z-index:1;

top:50%;

right:10px;

margin-top:-3.5px;

display:block;

width:0;

height:0;

border-style:solid;

border-width:5px 5px 0 5px;

border-color:#535353 transparent transparent transparent;

content:””;

}

以上就是自定義select樣式的方法；

同時也可以完全不要select這個元素使用div+css來自定義一個跟select一樣效果的下拉框（需要Javascript輔助）。

筆記：JS設置CSS樣式的幾種方式

1、直接更改，比如：

xID.style.display = “block”; // 更改display屬性，會覆蓋css中的定義。

xID.style.display = “”;      // 取消js更改display屬性，以css樣式為準。

這裡的xID，是通過id獲取的標籤。當然，也可能是通過tagName之類的獲取的標籤。

這種方式，簡單直接。但是要修改大量的樣式的時候，不適合。所以，我更推薦第二種方式。

2、更改類名

xID.className = “xx   yy”;

如果有多個類，就用空格隔開。前提，在樣式中要有已有類的定義。比如這裡的xx和yy類，在css中應該是寫好的。

這種方式把所有的樣式寫在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類。至於這個類會把標籤變成什麼樣子，交給css吧。

通過jquery也可以達到如上的效果：

$(“#xID”).css({

  fontSize:”12px”,

  display:”block”

});  // 直接更改樣式

$(“#xID”).addClass(“xx”);  // 增加刪除類

$(“#xID”).removeClass(“xx”);

怎麼用div+css和js製作回復窗口

針對Lightbox和Modal Dialog非常漂亮的的ajax彈窗效果（15款含下載）

運用Lightbox和Modal Dialog可以很方便地在瀏覽器中展示內容，而無需重載整個頁面，有了Lightbox就不必再使用瀏覽器彈窗了。Lightbox正愈來愈廣泛地應用於媒體、網頁、郵件、表格等元素的展示。

本文來源於WEB開發筆記 , 原文地址：

如何用JS點擊超鏈接彈出對話框

1、在body裡面布局，把對話框的大致結構寫出來。

2、寫css樣式，讓對話框在網頁上體現出來。

3、得到如下圖樣式，結構完成。

4、最後就是寫js樣式，讓我們的對話框達到一定的效果。

5、點擊超鏈接彈出對話框。

請教怎樣用CSS設置滑鼠指向彈出對話框

可以使用hover 比如有個父盒子暫且給個類名為f 有個子盒子暫且給個類名為c 給c一個disiplay：none；讓其隱藏 然後.f:hover.c {disiplay:block} 這樣當滑鼠懸停父盒子的時候 子盒子就會顯示出來 另外 需要注意hover和.c之間沒有空格

CSS+JS更改alert的默認對話框

百度都是些垃圾回答，我也找了半天，參考這篇文章，親測可行，簡單方便，引入js直接替換頁面alert，不需要改原本的代碼。

自定義alert樣式

alert屬於BOM中的window對象的方法，所以我們無法通過改dom文檔css來修改樣式，但可以直接重寫window.alert方法，以此達到目的