The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values.
Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will create a very basic modal.
HTML
<!DOCTYPE html><html>
<head>
<title>Modal Closing Button</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta content="text/html;charset=utf-8"
http-equiv="Content-Type"/>
<meta content="utf-8"
http-equiv="encoding"/>
<!-- Jquery -->
<script src=
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href=
<script src=
</script>
<!-- Personalized Includes -->
<!-- CSS -->
<style>
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
.btn-div {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="modal fade" id="main-modal">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="modal-header">
<h4 class="modal-title" id="modal-title">
Modal Heading
</h4>
<button type="button" class="close"
data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modal-body">
Modal Body
</div>
<!-- Modal footer -->
<div class="modal-footer" id="modal-footer">
Modal Footer
</div>
</div>
</div>
</div>
<div class="center btn-div">
<div>
<img src=
class="img-fluid"/>
</div>
<br/>
<button class="btn btn-success"
data-toggle="modal" data-target="#main-modal">
Open Modal
</button>
</div>
</body>
</html>
|
Output:
Approach: In the above, you can observe a button with class = “close” inside the modal header. This button is used for closing the modal element. data-dismiss property is used to switch the display style of the modal element.
<button type="button" class="close" data-dismiss="modal">
×
</button>- × gives the cross icon.
- data-dismiss switches the display property of modal element from “block” to “none”.
- You can shift this button description from header to any location inside the entire modal division to move the close button, or you can declare your own extra close button.
Below are the implementation methods for the above steps.
Method 1: Move the button description.
HTML
<!DOCTYPE html><html>
<head>
<title>Modal Closing Button</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta content="text/html;charset=utf-8"
http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<!-- Jquery -->
<script src=
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href=
<script src=
</script>
<!-- Personalized Includes -->
<!-- CSS -->
<style>
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
.btn-div {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="modal fade" id="main-modal">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="modal-header">
<h4 class="modal-title" id="modal-title">
Modal Heading
</h4>
<!--Button shifted from here...-->
</div>
<!-- Modal body -->
<div class="modal-body" id="modal-body">
Modal Body
<!--Button shifted to this place...-->
<button type="button"
class="close" data-dismiss="modal">
×
</button>
</div>
<!-- Modal footer -->
<div class="modal-footer" id="modal-footer">
Modal Footer
</div>
</div>
</div>
</div>
<div class="center btn-div">
<div>
<img src=
class="img-fluid"/>
</div>
<br/>
<button class="btn btn-success"
data-toggle="modal" data-target="#main-modal">
Open Modal
</button>
</div>
</body>
</html>
|
Output: The button appears in the body section of the modal element since it is moved to the body section.
Method 2: Define your own close button using the data-dismiss property.
HTML
<!DOCTYPE html><html>
<head>
<title>Modal Closing Button</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta content="text/html;charset=utf-8"
http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<!-- Jquery -->
<script src=
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href=
<script src=
</script>
<!-- Personalized Includes -->
<!-- CSS -->
<style>
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
.btn-div {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="modal fade" id="main-modal">
<div class="modal-dialog
modal-dialog-centered modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="modal-header">
<h4 class="modal-title" id="modal-title">
Modal Heading
</h4>
<button type="button" class="close"
data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modal-body">
Modal Body
</div>
<!-- Modal footer -->
<div class="modal-footer" id="modal-footer">
Modal Footer
<!--New Button declared here...-->
<button class="btn btn-danger"
data-dismiss="modal">
Close Modal
</button>
</div>
</div>
</div>
</div>
<div class="center btn-div">
<div>
<img src=
class="img-fluid" />
</div>
<br/>
<button class="btn btn-success"
data-toggle="modal"
data-target="#main-modal">
Open Modal
</button>
</div>
</body>
</html>
|
Output: A new close button is available in the modal footer section.
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari