Windows 8 Bootstrap Modals
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Windows 8 Bootstrap Modals </h2>
</div>
<div class="row">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Windows 8 modal - Click to View</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<H2>Battery Low!</H2>
<h4>Your Laptop battery is less then 10%.Recharge the battery.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
.modal {
/* display: block;*/
padding-right: 0px;
background-color: rgba(4, 4, 4, 0.8);
}
.modal-dialog {
top: 20%;
width: 100%;
position: absolute;
}
.modal-content {
border-radius: 0px;
border: none;
top: 40%;
}
.modal-body {
background-color: #0f8845;
color: white;
}
Add font-family:segoe ui light for exactly same effect..,Hi, I want to keep this style across my site, but with forms in modal it does not look good so big.I can change with but it align to left. How to align it to center?,<div class=”modal-dialog modal-lg text-center></div>”>,The author is AtiqUrRehman
Loading...
