Posted In: Bootstrap

Bootstrap 3 – Modal

How to open/close modal with javascript

$('#javausecaseMdl1').modal();
$('#javausecaseMdl1').modal('hide');

How to disable click outside of modal area to close modal

<div id="javausecaseMdl2" class="modal fade" role="dialog"
	data-backdrop="static" data-keyboard="false">

$('#javausecaseMdl1').modal({
	backdrop : 'static',
	keyboard : false
});

How to remove grey area outside Modal window

$('.modal-backdrop').remove();

How to pass data to a modal

data-id="myId"
$('#search_btn4').data('id')

Attach function to modal close event

$('#javausecaseMdl1').on('hidden.bs.modal', function () {
    loadFunction();
})

Modal dialog HTML full example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>

<script>
	function loadModal1() {
		$('#javausecaseMdl1').modal();
	}

	function loadModal2() {
		$('#javausecaseMdl2').modal();
	}

	function loadModal3() {
		$('#javausecaseMdl1').modal({
			backdrop : 'static',
			keyboard : false
		});
	}

	function loadModal4() {
		$('#javausecaseMdl1').modal();
		alert($('#search_btn4').data('id'));
	}
</script>

</head>
<body>

	<div class="row">
		<div class="col-md-6">
			<div id="candidate_search_btn_grp_id" class="btn-group pull-right">
				<button id="search_btn1" type="button" class="btn btn-primary btn"
					onclick="loadModal1();">
					<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
					Modal1
				</button>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div id="candidate_search_btn_grp_id" class="btn-group pull-right">
				<button id="search_btn2" type="button" class="btn btn-primary btn"
					onclick="loadModal2();">
					<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
					Modal2
				</button>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div id="candidate_search_btn_grp_id" class="btn-group pull-right">
				<button id="search_btn4" type="button" data-id="myId"
					class="btn btn-primary btn" onclick="loadModal4();">
					<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
					Modal4
				</button>
			</div>
		</div>
	</div>

	<div id="javausecaseMdl1" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Modal Test</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">Modal content</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="javausecaseMdl2" class="modal fade" role="dialog"
		data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Modal Test</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">Modal content</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Tags:

by , on September 21st, 2017

  • Categories