设计弹出对话框
综合运用html、CSS、JavaScript实现点击按钮弹出对话框的功能。
提示:
(1)采用CSS对弹出的对话框的样式进行自定义,包括外框样式和标题栏样式;
(2)定义openDialog()事件,用于弹出对话框。
<!doctype html>
<html>
<head>
<title>3.1 设计弹出对话框</title>
<style>
.ui-dialog{
width: 380px;height: auto;display: none;
position: absolute;z-index: 9000;
top: 0px;left: 0px;
border: 1px solid #D5D5D5;background: #fff;
}
.ui-dialog a{
text-decoration: none;}
.ui-dialog-title{
height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
border-bottom: 1px solid #efefef;background: #f5f5f5;
cursor: move;
user-select:none;
}
.ui-dialog-closebutton{
width: 16px;height: 16px;display: block;
position: absolute;top: 12px;right: 20px;
background: url(../images/close_def.png) no-repeat;cursor: pointer;
}
.ui-dialog-closebutton:hover{
background:url(../images/close_hov.png);}
.ui-dialog-content{
padding: 15px 20px;
}
.ui-dialog-pt15{
padding-top: 15px;
}
.ui-dialog