Bootstrap Modal
Modal popup is like a dialog box that display over your current page.Modal popup get focus when open.Bootstrap uses attribute data-toggle="modal" and data-target to display a modal popup.
Example
Bootstrap Example
Output:
Bootstrap Example
Small Large Example
Bootstrap Example
Modal popup is like a dialog box that display over your current page.Modal popup get focus when open.Bootstrap uses attribute data-toggle="modal" and data-target to display a modal popup.
Example
<!DOCTYPE
html>
<html
lang="en">
<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">
<button
type="button"
class="btn
btn-default"
data-toggle="modal"
data-target="#myModal">
Display
Modal</button>
</div>
<div
class="modal
fade"
id="myModal"
role="dialog">
<div
class="modal-dialog">
<span>This
is Modal Body</span>
</div>
</div>
</body>
</html>
Output
This is Modal Body
Modal Size
You can change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.
Small Size Example
You can change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.
Small Size Example
<!DOCTYPE
html>
<html
lang="en">
<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">
<button
type="button"
class="btn
btn-default"
data-toggle="modal"
data-target="#myModal">
Display
Modal</button>
</div>
<div
class="modal
fade"
id="myModal"
role="dialog">
<div
class="modal-dialog
modal-sm">
<span>This
is Modal Body</span>
</div></div>
</body>
</html>
This is Modal Body
Small Large Example
<!DOCTYPE
html>
<html
lang="en">
<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">
<button
type="button"
class="btn
btn-default"
data-toggle="modal"
data-target="#myModal">
Display
Modal</button>
</div>
<div
class="modal
fade"
id="myModal"
role="dialog">
<div
class="modal-dialog
modal-lg">
<span>This
is Modal Body</span>
</div></div>
</body>
</html>
This is Modal Body
No comments:
Post a Comment