<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="flex">
<div class="modalcontainer">
<div class="flex">
<div class="modal">
<div class="close"><span>+</span></div>
<div class="content">
<h2>Modal title</h2>
<p>Let's go up in here, and start having some fun The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. It's a super day, so why not make a beautiful sky?</p>
</div>
<div class="buttons">
<a href="#0">Cancel</a>
<a href="#0">Accept</a>
</div>
</div>
</div>
</div>
<a href="#0" class="modalbttn">Open Modal</a>
</div>
<script>
$(".modalbttn").click(function() {
$(".modalcontainer").fadeIn("slow");
$(".modal").fadeIn("slow");
});
$(".close").click(function() {
$(".modalcontainer").fadeOut("slow");
$(".modal").fadeOut("slow");
});
$(".buttons").click(function() {
$(".modalcontainer").fadeOut("slow");
$(".modal").fadeOut("slow");
