Home/Questions/Q 1269
Next

RTSALL Latest Articles

Queryiest
Enlightened
Asked: 2023-04-07T23:44:22-05:00 In:

I want to open a bootstrap pop up model. How I can do?

To open a popup modal using Bootstrap, you’ll need to include the Bootstrap CDN and the necessary JavaScript code in your HTML file. Here are the steps:

  1. Include the Bootstrap CSS and JS files in the head section of your HTML file using the following CDN links:
<head>
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  1. Add a button to your HTML file that will trigger the modal when clicked:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

In this code, the data-toggle="modal" attribute tells Bootstrap that this button should open a modal, and the data-target="#myModal" attribute specifies which modal to open (in this case, a modal with the id of myModal).

  1. Add the modal code to your HTML file:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>


In this code, the id of the modal matches the data-target attribute in the button, so when the button is clicked, the modal will open.
bootstrapjquerymodelmodel pop uppop up

Leave an answer

You must login to add an answer.

Need An Account,