ul { margin:0; list-style:none; padding-left:0; } li { padding-top:10px; padding-bottom:10px; } button.active { background-color:red; } li.active { background-color:#ccc; } .dialog { position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgb(0,0,0,.5); z-index:9; opacity:0; visibility:hidden; transition:all .5s ease-in; } .dialog-content { position:fixed; width:300px; top:-100%; left:50%; padding:20px; margin-left:-150px; z-index:10; background-color:#fff; border-radius:4px; box-shadow:0 0 20px rgb(0,0,0,.5); transition:all .5s; } .dialog-hd { overflow:hidden; } .dialog-hd b { float:right; padding:5px; cursor:pointer; } .dialog-hd h2 { margin:0; padding:0; font-size:16px; line-height:2.2; } .dialog-bd { padding:15px 0; } .dialog-ft { text-align:right; } .dialog.open { opacity:1; visibility:visible; } .dialog.open .dialog-content { top:20%; transition:all .8s; }