本文实例讲述了Angular2.0实现modal对话框的方法。分享给大家供大家参考,具体如下:
觉得写的比较巧妙的就是样式的选取~记录下
CSS部分
rush:css;">
.font {
font-family: "Microsoft YaHei",Arial;
font-size: 12px;
color: #333333;
}
.ky-modal-content {
min-width: 520px;
min-height: 240px;
}
.ky-modal-header {
/*height : 40px;*/
padding: 0 10px 0 10px;
}
.ky-modal-title {
font-size: 16px;
font-weight: 100;
}
.ky-modal-body {
min-height: 110px;
text-align: center;
}
.ky-modal-footer {
height: 30px;
border-top: 0;
text-align: -webkit-center;
}
.ky-modal-message {
padding-left: 3px;
vertical-align: middle;
}
.ky-modal-icon {
font-size: 16px;
vertical-align: middle;
}
.ky-modal-question-icon {
color:#ff8000;
}
.ky-modal-check-icon {
color:green;
}
.ky-modal-exclamation-icon {
color:red;
}
.ky-modal-close {
outline: none;
font-size: 30px;
margin-top: 8px;
font-weight: 100;
vertical-align: -webkit-baseline-middle;
}
.vertical-align-center {
display: flex;
display: -webkit-Box;
display: -moz-Box;
-webkit-Box-align: center;
-moz-Box-align: center;
text-align: -webkit-center;
}
HTML部分
rush:xhtml;">