test modal

JavaScript performance comparison

Test case created

Preparation code

<script src="//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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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

Add a comment