使用css和jquery建立模態彈窗
阿新 • • 發佈：2018-12-20
今天自己嘗試做了一下模態彈窗的樣式，把程式碼貼在這裡供以後複習。 1、佈局主要使用flex佈局。 2、毛玻璃效果和條紋背景的程式碼參考《css揭祕》。 3、彈窗的樣式參考jquery-ui的彈窗樣式。
一、模態彈窗
1、html部分
<!-- 這是一個普通的按鈕，用來觸發彈窗顯示。 -->
<button id="alert-window" class="btn" type="button">彈窗</button>
<!-- 這是一個普通的文字框，用來驗證模態效果。 -->
<input>
<!-- ************** 2、css部分
<style type="text/css">
/* 遮罩層 */
.overlay {
position: fixed; /* 將遮罩層鋪滿整個螢幕 */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #abababcc; /* 設定遮罩層背景色為有點透明的淺灰色 */
display: none; /* 設定遮罩層預設不顯示 */
justify-content: center; /* 設定彈窗左右居中 */
}
/* 彈出窗 */
.dialog {
z-index: 1; /* 為彈窗指定更高的z-index，以便繪製在遮罩層的上層 */
width: 400px; /* 設定彈窗寬度 */
height: 350px; /* 設定彈窗高度 */
background: #fff; /* 設定彈窗背景色為白色 */
align-self: center; /* 設定彈窗上下居中 */
display: flex; /* 設定彈窗內佈局為flex佈局 */
flex-direction: column; /* 設定彈窗內flex佈局方向為垂直方向 */
border-radius: 4px; /* 設定彈窗有4px的圓角 */
}
.dialog-header {
background: #ccc; /* 設定彈窗頭部的背景色為灰色 */
display: flex; /* 設定彈窗頭部的佈局為flex佈局 */
margin: .2em; /* 設定彈窗頭部的外邊距 */
padding: .2em .2em .2em .5em; /* 設定彈窗頭部的內邊距 */
height: 2.5em; /* 設定彈窗頭部的高度 */
border-radius: 3px; /* 設定彈窗頭部的圓角 */
align-items: center; /* 設定彈窗頭部的內容上下居中 */
}
.dialog-header .dialog-title {
flex-grow: 1; /* 設定彈窗頭部的標題部分充滿剩餘空間 */
}
.dialog-header .dialog-close-icon {
background: #e6e6e6; /* 設定彈窗頭部的關閉按鈕背景色 */
padding: .1em .35em; /* 設定彈窗頭部的關閉按鈕內邊距 */
margin-right: .2em; /* 設定彈窗頭部的外邊距 */
cursor: pointer; /* 設定彈窗頭部的關閉按鈕的滑鼠樣式 */
border-radius: 3px; /* 設定彈窗頭部的關閉按鈕的圓角 */
}
.dialog-header .dialog-close-icon:hover {
background: #666; /* 設定彈窗頭部的關閉按鈕滑鼠懸浮背景色 */
}
.dialog-header .dialog-close-icon:after { /* 設定彈窗頭部的關閉按鈕的內容（x） */
content: "\d7";
font-size: 1.2em;
color: #666;
}
.dialog-header .dialog-close-icon:hover:after {
color: #fff;
}
.dialog-content {
flex-grow: 1; /* 設定彈窗內容部分充滿剩餘空間 */
margin: 0 .2em; /* 設定彈窗內容部分的外邊距 */
}
.dialog-footer {
border-style: solid; /* 設定彈窗底部的邊框樣式為實線 */
border-width: 1px 0 0; /* 設定彈窗底部只有上邊框 */
padding: .5em; /* 設定彈窗底部的內邊距 */
margin: 0 .2em; /* 設定彈窗底部的外邊距 */
display: flex; /* 設定彈窗底部的佈局為flex佈局 */
justify-content: flex-end; /* 設定彈窗底部的內容右對齊 */
}
.dialog-footer .btn{ /* 設定彈窗底部的按鈕樣式 */
font-size: medium;
width: 5em;
margin: .2em .5em;
padding: .5em;
}
.btn { /* 設定按鈕樣式 */
border: 0;
border-radius: 3px;
padding: 1em;
font-size: large;
background: #ccc;
width: 8em;
}
.btn:hover { /* 設定按鈕的懸浮樣式 */
background: #666;
color: #fff;
cursor: pointer;
}
</style>
3、js部分
下面是需要在初始時新增的js程式碼：
<script type="text/javascript">
// 彈出彈窗的方法，引數為class為overlay的元素id。
function openDialog(dialogId){
//設定遮罩層為flex佈局，顯示遮罩層和彈窗。
$("#"+dialogId+"").css("display", "flex");
}
// 關閉彈窗的事件處理。為想要關閉彈窗的按鈕新增'dialog'類即可。
$(".dialog-close").click(function(){
//找到當前關閉彈窗按鈕所在的遮罩層，並隱藏。
$(this).parents(".overlay").hide();
});
</script>
下面是需要在指定彈窗按鈕時新增的js程式碼：
<script type="text/javascript">
// alert-window：點選後顯示彈框的元素id。
// dialog-1：彈框遮罩層元素的id。
$("#alert-window").click(function(){
openDialog("dialog-1");
});
</script>
4、最終效果：
二、毛玻璃背景效果
1、html部分
/* 注意要使用dialog-background元素把除了彈框部分的內容包裹起來。 */
<div class="dialog-background">
<button id="alert-window" class="btn" type="button">彈窗</button>
<input>
/* 引入色彩豐富的圖片來展示毛玻璃效果。 */
<img src="./bg.PNG">
</div>
<div id="dialog-1" class="dialog">
<div class="dialog-header">
<div class="dialog-title">
這是彈框標題
</div>
<div class="dialog-close-icon dialog-close"></div>
</div>
<div class="dialog-content">
這是彈框內容
</div>
<div class="dialog-footer">
<button class="btn dialog-close">OK</button>
<button class="btn">cancel</button>
</div>
</div>
2、css部分
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 毛玻璃效果的背景 */
.dialog-background {
transition: .1s filter; /* 毛玻璃效果的漸變時間 */
}
.dialog-background.de-emphasized {
filter: blur(3px) contrast(.8) brightness(.8);/* 毛玻璃效果的濾鏡 */
}
/* 彈出窗 */
.dialog {
z-index: 1;
position: absolute;
top: 80px;
left: 35%;
width: 400px;
height: 350px;
background: #fff;
display: none;
flex-direction: column;
border-radius: 4px;
}
.dialog-header {
background: #ccc;
display: flex;
margin: .2em;
padding: .2em .2em .2em .5em;
height: 2.5em;
border-radius: 3px;
align-items: center;
}
.dialog-header .dialog-title {
flex-grow: 1;
}
.dialog-header .dialog-close-icon {
background: #e6e6e6;
padding: .1em .35em;
margin-right: .2em;
cursor: pointer;
border-radius: 3px;
}
.dialog-header .dialog-close-icon:hover {
background: #666;
}
.dialog-header .dialog-close-icon:after {
content: "\d7";
font-size: 1.2em;
color: #666;
}
.dialog-header .dialog-close-icon:hover:after {
color: #fff;
}
.dialog-content {
flex-grow: 1;
margin: 0 .2em;
}
.dialog-footer {
border-style: solid;
border-width: 1px 0 0;
padding: .5em;
margin: 0 .2em;
display: flex;
justify-content: flex-end;
}
.dialog-footer .btn{
font-size: medium;
width: 5em;
margin: .2em .5em;
padding: .5em;
}
.btn {
border: 0;
border-radius: 3px;
padding: 1em;
font-size: large;
background: #ccc;
width: 8em;
}
.btn:hover {
background: #666;
color: #fff;
cursor: pointer;
}
</style>
3、js部分
<script type="text/javascript">
// 點選id為alert-window的按鈕後顯示彈窗。
$("#alert-window").click(function(){
openDialog("dialog-1");
$(".dialog-background").addClass("de-emphasized");
});
// 顯示彈窗的方法。
function openDialog(dialogId){
$("#"+dialogId+"").css("display", "flex");
}
// 為所有dialog-close的元素新增關閉彈窗的事件。
$(".dialog-close").click(function(){
$(this).parents(".dialog").hide();
$(".dialog-background").removeClass("de-emphasized");
});
</script>
4、實際效果
三、斜條紋效果
斜條紋效果的彈窗只是改變了一下模態框的背景色而已，所以把模態框的背景改成下面的程式碼就可以啦。（《css揭祕》提供的這個生成斜條紋的方法真是好用。）
/* 設定斜條紋顏色 */
background: #aab;
/* 設定斜條紋樣式 */
background-image: repeating-linear-gradient(30deg,
hsla(0, 0%, 100%, .1),
hsla(0, 0%, 100%, .1) 15px,
transparent 0, transparent 30px);
最終效果:
