Skip to content

Instantly share code, notes, and snippets.

@viko16

viko16/dialog.html

Last active January 4, 2016 06:39
Show Gist options
  • Save viko16/8583375 to your computer and use it in GitHub Desktop.
Save viko16/8583375 to your computer and use it in GitHub Desktop.
Download ZIP
一个很精致、简洁的弹出框样式 #html
Raw
dialog.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
font: normal 13px Roboto,arial,sans-serif;
}
.dialog{
position: fixed;
left: 30%;
top: 10%;
width: 40%;
height: auto;
max-height: 80%;
text-align: center;
z-index: 1000;
color: #000;
padding: 35px 40px;
box-shadow: 0 0 40px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.4);
background-color: #fff;
background-clip: padding-box;
}
.title{
font-size: 20px;
padding-bottom: 10px;
position: relative;
word-wrap: break-word;
}
.title span{
font-weight: 300;
color: #262626;
}
.else{
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="title">
<span>I'm title</span>
</div>
<div class="else">
Anything else...
</div>
</div>
<iframe src="http://www.baidu.com" width="100%" height="800"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment