Bootstrap 3 - How to center the modal

by Mike Rawling

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//video.unrulymedia.com/ux-guidelines/latest/bootstrap/unruly-bootstrap.min.css">
<link rel="stylesheet" href="https://video.unrulymedia.com/ux-guidelines/latest/styles/unruly-styles.css">
<script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<!-- Button trigger modal -->
<header>my header</header>

<h1>Deals dashboard</h1>
<p>This is the deals dashbaord</p>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus-circle" aria-hidden="true"></i> Create new deal</button>

<footer>
	my footer
</footer>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
		<!--- ONE ---> 
            <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">Creating an UnrulyX deal 1/5</h4>
                </div>
                <div class="modal-body">
					<fieldset class="f1 tadaaa">
						<legend>Enter your core deal details</legend>
						<p>
						<label>Deal name</label><br />
						<input type="text" value="" placeholder="enter a helpful deal name to identify this deal easily"  />
						</p>
						<p>
						<label>Deal x</label><br />
						<input type="text" value="" placeholder="enter a helpful deal name to identify this deal easily" ...

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}
#myModalx,
.modal-content,
.modal-dialog,
.modal-body,
fieldset{
	transition: all 2s 0s cubic-bezier(.42, 0, .58, 1) !important;
}
.modal-body fieldset input{
	width:25em;
}
legend{
	font-size:12px;
}
body .modal-dialog{
	z-index:1000;
}
body .modal-backdrop.in {
    z-index: 1;
}
.modal-content-two, 
.f2{
	display:none;
}
fieldset{
	visibility:hidden;
}
body .tadaaa{
	visbility:visible !important;
}

JavaScript

jQuery(document).ready(function(e) {
    //jQuery('#myModal').trigger('click');
	//jQuery('.modal-content-two').show().trigger('click');
});

//jQuery.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
//jQuery('.box').transition({ x: 0 }, 500,'bounce');

jQuery("#next-button").click(function(){
	//alert("yay");
	console.log("next clicked");
	//jQuery(".f2").toggle();
	//jQuery(".f1").fadeToggle( "slow", "linear" );
	//jQuery(".f2").fadeToggle( "slow", "linear" );
	jQuery("fieldset.f1").removeClass("tadaaa");
	jQuery("fieldset.f2").addClass("tadaaa");

});
	
jQuery("#previous").click(function(){
	console.log("prev clicked");
	jQuery(".f1").addClass( "tadaaa" );
	jQuery(".f2").removeClass( "tadaaa" );
	//add data-dismiss="modal"
});