- SPLessons

Implementing Twitter Bootstrap Modal

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Implementing Twitter Bootstrap Modal

Implementing Twitter Bootstrap Modal 


Bootstrap is a opensource to make your web page beautifully. In Bootstrap model is feature to a open popup in your page.This article shows how to add a simple bootstrap model.

Description :
I have a web page with some content (like properties). When the user browsing for properties, If he like any property he can click in interested button. On click of interested button the bootstrap model will open. In that you can put any kind of data. In my model I Kept some contact information about the user. Follow below simple steps to Implementing Twitter Bootstrap Modal.

 

Step1 :

Add below code in page header


<link type="text/css" rel="stylesheet" href="bootstrap.min.css" >

 

<script type="text/javascript" source="jquery-1.7.2.min.js"></script>
<script type="text/javascript" source="bootstrap.min.js"></script>

Step2 :

Add below code in HTML body 


<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Open Model
</button>

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 </div>
 <div class="modal-body">
 ...
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</div> 

Simple just click on Open Model button, you can get bootstrap model.