Bootstrap Modal Content Update
by fredd man
HTML
<link rel="stylesheet" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="https://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="https://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="regModal" class="modal fade" role="dialog">
<div id="login-overlay" class="modal-dialog firstReg rtl">
<div class="modal-content">
<div class="login-modal">
<div class="modal-header"></div>
<div class="modal-body">
<div class="col-xs-4">
</div>
<div id = "#main-form" class="col-xs-8">
<p>gh</p>
<p style="display:none">
<form id="search-term">
<input id="queryInput" autocapitalize="none" autocomplete="off" autocorrect="off" name="search_query" tabindex="0" type="text" spellcheck="false" placeholder="Search" aria-label="Search" aria-haspopup="false" role="combobox" aria-autocomplete="list" dir="ltr" class="ytd-searchbox" style="outline: none;">
<button id="searchButton" class="search-button" type="text">
Go
</button>
</form>
<div id="search_results" class="main-container">
</div>
<div>
<style type="text/css">
.card{
width: 100%;
border-radius: 5px;
background-color: #FFF;
box-shadow: 0px 1px...
CSS
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#regModal .hidden{
display: "none";
}
JavaScript
$('.launchConfirm').on('click', function (e) {
$('#regModal').modal({ backdrop: 'static', keyboard: false });
});
$("#regModal a").click(function(evt) {
evt.preventDefault();
var $col4 = $("#regModal .col-xs-4").fadeOut(2000);
$col4.next().removeClass('col-xs-8').addClass('col-xs-12');
var $firstChild = $col4.next().children().first().hide();
$firstChild.next().fadeIn(2000);
});