Skip to content

Instantly share code, notes, and snippets.

@killinterpol
Created April 4, 2014 23:17
Show Gist options
  • Save killinterpol/9984920 to your computer and use it in GitHub Desktop.
Save killinterpol/9984920 to your computer and use it in GitHub Desktop.
.box { border: 1px solid blue}
.Claim { position: relative; border: 1px solid black; background-color: gray; color: white; width:150px; margin: 10px; padding:5px;};
.Claim.rollup { background-image:url('/_mnpstatic/images/rollup.png'); }
.Claim.sentpaid { background:url('https://photos-3.dropbox.com/t/0/AAAortjUeVUGW4iYJPqTDX2HcZUCeiMRBzL2EK-EKfRnSw/12/63880/png/2048x1536/3/1396656000/0/2/claim-statusicon-sent.png/s0SijiDrGBQstFA9alrQ-m5ocLriyburAPKUQH9mN0I') 10px 5px no-repeat,
url('https://photos-5.dropbox.com/t/0/AAD3ViyyG2CdRJtFVq4rg354QRGo_8bfb_3bm9c4xRsa-g/12/63880/png/2048x1536/3/1396656000/0/2/453-dollars-xsm-offset.png/B2gmBmBEe7tRM19C5mWptqz6d6yYZbR9fV7PybkO4cs') 0px 5px no-repeat, gray; cursor: pointer}
.Claim.status { padding-left: 60px;}
.modal-header {
border-bottom: 1px solid #428bca;
background-color: #5bc0de;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box" id="container">
<div class="Claim sentpaid status">Status</div>
<p>This is a claim</p>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Additional Info</h4>
</div>
<div class="modal-body">
This is a small dialog box
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$("#container").click(function() {
$("#myModal").modal('toggle');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment