Boostrap Modal

by Tika Datta Pahadi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<img id=pele src='http://www.leepa.org/dotnet/Photo/Photo.aspx?width=500&Id=1090176' />


<p id=rooney>
Roooney
</p>

CSS

.popup-modal .modal-content{
  border-radius : 3px
}

.popup-modal button.close {
    top: -20px;
    position: absolute;
    right: -20px;
    background: #444;
    padding: 6px 8px;
    border-radius: 50%;
    color: #FFF;
    opacity: 1;
    text-shadow: none;
    border: 2px solid white;
    font-size: 14px;
}
.pad10{ padding: 10px }

.popup-modal .modal-dialog{
    position: relative;
    display: table; //This is important 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

JavaScript

document.ready = function(){

var bs_popup_template = '<div class="modal popup-modal" id={id} role=dialog tabindex=-1><div class=modal-dialog role=document><div class=modal-content><button aria-label=Close class=close data-dismiss=modal type=button><span aria-hidden=true>&#10005;</span></button><div class=modal-body><div class="pad10 text-center"><i class="fa fa-2x fa-circle-o-notch fa-spin"></i></div></div></div></div></div>';

jQuery.fn.extend({
  presentModal: function(options) {
    return this.each(function() {
    		var id = $(this).attr('id') + "-popup-modal";
        if(!options){
        	options = {};
        }
        if (!options.content){
        		options.content = $(this)[0].outerHTML
        }
        
        $("#"+id).remove();
    		$('body').append(bs_popup_template.replace('{id}', id));
        
        $("#" + id + " .modal-body").html(options.content)
        
        $("#"+id).modal({
        	backdrop: 'static'
        })
        .on('hidden.bs.modal', function () {
					$("#"+id).remove();
				})
        
        
    });
  }, 
  loadModal: function(link) {
    return this.each(function() {
        var id = $(this).attr('id') + "-popup-modal";
        if(!options){
        	options = {};
        }
        if (!options.content){
        		options.content = $(this)[0].outerHTML
        }
        
        $("#"+id).remove();
    		$('body').append(bs_popup_template.replace('{id}', id));
        
        $("#" + id + " .modal-body").load(link);
        
        $("#"+id).modal({
        	backdrop: 'static'
        })
        .on('hidden.bs.modal', function () {
					$("#"+id).remove();
				})
    });
  }, 
  clickModal: function(options) {
  
  		var delegate = $(this);
      var target = delegate;
      
			if (options && options.target){
      		target = options.target;
      }
      
      if (options && options.load){
          
      } else {
      
        delegate.on('click', function(){
          target.presentModal();
        });
  ...