Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Yogesh Kanthale

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="modal fade" id="removelayer" style="z-index:10000" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel" data-localresource="public.kiosk.popuplayertitle.removelayer">removelayer</h4>
                </div>
                <div class="modal-body" data-localresource="public.kiosk.popuplayermessage.removelayer">
                   removelayer
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="RemoveLayer()" data-localresource="public.kiosk.popupbtn.yes">yes</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" data-localresource="public.kiosk.popupbtn.no">no</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

 <span id="btnLayerClose" class="label label-danger" data-toggle="modal" data-target="#removelayer" style="position:absolute">
        <span class="glyphicon glyphicon-remove" style="font-size:1.6em"></span>
    </span>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$('.modal').on('show.bs.modal', function (e) {
    $(this).on('click', function (e) {
        $(this).modal('hide');
    });
    $(this).css({ 'display': 'table', 'width': '100%', 'height': '100%' });
    $(this).find('.modal-dialog').css({ 'padding': '0px', 'display': 'table-cell', 'vertical-align': 'middle' });
    $(this).find('.modal-content').css({ 'width': '60%', 'margin': '0px auto' });
});

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find('.modal-content').removeAttr('style');
    $(this).find('.modal-dialog').removeAttr('style');
});