test modal

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<style>
		#overlay{
		    position:fixed;
		    width:100%;
		    height:100%;
		    top:0;
		    left:0;
		    z-index:1000;
		     background:url(http://com.images.housepierre.s3.amazonaws.com/fancybox_overlay.png);
		    
		}

		#modal{
		    position:relative;
		    z-index:2000;
		    top:50%;
		    left:50%;
		    max-width:90%;
		    height:auto;
		    -webkit-transform: translateX(-50%);
		    border:5px solid #f5f5f5;
		}

		#modal img{
			position:relative;
			z-index:2050;
			display:block;
			width:100%;
			height:auto;
		}

		#close{
		    position:absolute;
		    z-index:2100;
		    top:-10px;
		    right:-10px;
		    background:#000;
		    border-radius:50%;
		    height:20px;
		    width:20px;
		    border:2px solid #fff;
		    color:#fff;
		    cursor:pointer;
		    font-family:arial, sans-serif;
		    text-align:center;
		        
		}

		.hide{
			display:none;
		}

	</style>

		<a href="http://com.images.housepierre.s3.amazonaws.com/gallery/dolphins_in_golfo_dulce.jpg" id="modalTest">
    <img src="http://com.images.housepierre.s3.amazonaws.com/gallery/thumbs/dolphins_in_golfo_dulce.jpg" />
</a> 

	
    

Preparation code output

<style> #overlay{ position:fixed; width:100%; height:100%; top:0; left:0; z-index:1000; background:url(http://com.images.housepierre.s3.amazonaws.com/fancybox_overlay.png); } #modal{ position:relative; z-index:2000; top:50%; left:50%; max-width:90%; height:auto; -webkit-transform: translateX(-50%); border:5px solid #f5f5f5; } #modal img{ position:relative; z-index:2050; display:block; width:100%; height:auto; } #close{ position:absolute; z-index:2100; top:-10px; right:-10px; background:#000; border-radius:50%; height:20px; width:20px; border:2px solid #fff; color:#fff; cursor:pointer; font-family:arial, sans-serif; text-align:center; } .hide{ display:none; } </style> <a href="http://com.images.housepierre.s3.amazonaws.com/gallery/dolphins_in_golfo_dulce.jpg" id="modalTest"> <img src="http://com.images.housepierre.s3.amazonaws.com/gallery/thumbs/dolphins_in_golfo_dulce.jpg" /> </a>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
raw
 var modal = document.createElement('div'),
   overlay = document.createElement('div');
 closeBtn = document.createElement("a");
 modalBtn = document.getElementById("modalTest"),
 imgBig = document.createElement('img');


 overlay.id = "overlay";

 modal.id = "modal";

 closeBtn.id = "close";
 closeBtn.innerHTML = "X";

 modal.appendChild(closeBtn);

 modalBtn.addEventListener('click', function(e) {
   e.preventDefault();
   var linkedImg = this.getAttribute('href');


   imgBig.src = linkedImg;

   if (modal.classList.contains("hide")) {
     overlay.classList.toggle("hide");
     modal.classList.toggle("hide");
   }



   modal.appendChild(imgBig);
   document.body.appendChild(overlay);
   document.body.appendChild(modal);
 });

 closeBtn.addEventListener('click', function(e) {
   e.preventDefault();

   overlay.classList.toggle("hide");
   modal.classList.toggle("hide");

 });
pending…
jQuery
 $("a").on('click', function(e) {
   var linked = $(this).attr('href'),
     imgBig = "<img>";

   img.attr('src', linked);
   $(document.body).append("<div id='overlay'></div> <div id = 'modal' > <a id = 'close' > X </a></div> ");
   $('#modal').appendTo(imgBig);
 });

 $("#close ").on('click', function(e) {
   $('#overlay').toggleClass('hide');
   $('#modal').toggleClass('hide');
 });
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments