Nice twitter bootstrap popup box(modal)

Recently I came across a requirement to have some content on the pop up box when a user clicks on the link. The content can be static or dynamic from the database itself. There are several options that are available like jqbox. However I found twitter bootstrap modal quite useful and attractive.

Refer to the link to know how to use it Twitter Bootstrap modal

To make it dynamic I simply made an ajax call and used the returned JSON object to append the content in the modal. Refer the following to get a brief idea about it.

Code for Twitterbootstrap modal:-



<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header" style="background-color:#CCB647"><h3>  <center><font color="white">Identify the Person!!</font><a class="close" data-dismiss="modal">×</a></center> </h3>
</div>
<div class="modal-body" style="background-color:#D6DEE4">
<div id="game">
<img id="photo" src="" style="width:200px;height:200px;"><br/>
 <div id="options">
 </div>
</div>
</div>
<div class="modal-footer" style="background-color:#CCB647">

Link to open the modal:

<a data-toggle='modal' href='#example' data-backdrop="static" data-keyboard="false" onclick="updatemodal();">
</a>

Script for ajax call:

function updatemodal{
  $.ajax({
   url: '../play/play_game',
   error: function (XMLHttpRequest,textStatus,errorThrown) {
     alert("Something went wrong!! Please try again later. Unable to create options");

   },
   success: function(data){

// Here data is the json object returned by the server
      var jsonObj = $.parseJSON(data);

      $.each(jsonObj,function(key,value){
 
  $('#options').append(value.content);
 
    });

   },
   type: "get"
 });



}