<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.modalBox {
display: none;
}
.alertContent {
transition: opacity .3s linear, top .3s ease-out;
opacity: 1;
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
max-height: 500px;
overflow: auto;
width: 750px;
margin: -250px 0 0 -280px;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
background-clip: padding-box;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.textMessage{
margin:25px 0px 15px 5px;
}
.textMessage li{
line-height:10px;
list-style-type:none;
}
.modal-footer{
padding: 12px 16px 38px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-radius: 0 0 6px 6px;
box-shadow: inset 0 1px 0 #ffffff;
}
.modalBtn {
width:130px;
float: right;
margin-left: 5px;
margin-bottom: 10px;
display: inline-block;
padding: 4px 10px 4px;
font-size: 13px;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #f5f5f5;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border: 1px solid #ccc;
border-bottom-color: #bbb;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.overLay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
background-color: #000000;
}
.modal-header {
padding: 9px 15px;
margin-top: 2px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.close {
margin-top: 2px;
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
filter: alph.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
</style>
</head>
<body>
<!-- modalBox -->
<input type="button" value="modalTest" onclick="showModal();"/>
<div class="modalBox" id="modalBox">
<div class="overLay"></div>
<div class="alertContent">
<div class="modal-header">
<a class="close" data-dismiss="modal" onclick="closeModal();">X</ a>
<h3>Title</h3>
</div>
<ul class="textMessage">
<li>content1</li><br/>
<li>content2</li><br/>
<li>content3</li><br/>
<li>content4</li>
</ul>
<div class="modal-footer" >
<input class="modalBtn" type="button" value="next" onclick="next();"/>
<input class="modalBtn" type="button" value="close" onclick="closeModal();"/>
</div>
</div>
</div>
<script>
function showModal(){
document.getElementById("modalBox").style.display = 'block';
}
function closeModal(){
document.getElementById("modalBox").style.display = 'none';
}
</script>
</body>
</html>
無依賴的簡約版bootstrap modal框
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章