Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
modal(options) method in Bootstrap
If you want to set content as a Bootstrap modal, then use the .modal(options) method.
For this, use jQuery to set the model on the click of a button as in the following code snippet −
$(document).ready(function(){
$("#button1").click(function(){
$("#newModal1").modal({backdrop: true});
});
});Let us now implement the modal(“options”) class. Here, we have two buttons that would generate different types of modals on click. One of them would close on clicking outside the modal, but another one will not close.
Here is the complete example −
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Sample</h2>
<button type="button" class="btn btn-default btn-lg" id="button1">Modal One</button>
<button type="button" class="btn btn-default btn-lg" id="button2">Modal Two</button>
<div class="modal fade" id="newModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sample Modal 1</h4>
</div>
<div class="modal-body">
<p>Click outside to close it.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sample Modal 2</h4>
</div>
<div class="modal-body">
<p>It won't close on clicking outside.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#newModal1").modal({backdrop: true});
});
$("#button2").click(function(){
$("#newModal2").modal({backdrop: false});
});
});
</script>
</body>
</html>
Updated on: 15-Jun-2020
910 Views
Advertisements