Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
​
  <div class="modal_style ">
MODAL WINDOW
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus libero, euismod eget odio eu, tristique feugiat ex. Fusce in nisl egestas, faucibus tortor ac, pretium neque. Vestibulum vitae risus sed diam imperdiet sodales. Mauris sit amet cursus velit. Mauris leo tellus, tincidunt eu dictum at, imperdiet sed orci. Proin eu odio commodo quam interdum volutpat a et dolor. Sed tempor dolor non finibus efficitur. Suspendisse aliquam</div>
</div>
<br>
<div id="fixed" class="modal_style modal_right">
MODAL WINDOW FIXED Matrix
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus libero, euismod eget odio eu, tristique feugiat ex. Fusce in nisl egestas, faucibus tortor ac, pretium neque. Vestibulum vitae risus sed diam imperdiet sodales. Mauris sit amet cursus velit. Mauris leo tellus, tincidunt eu dictum at, imperdiet sed orci. Proin eu odio commodo quam interdum volutpat a et dolor. Sed tempor dolor non finibus efficitur. Suspendisse aliquam</div>
</div>
 
.modal_style{
background-color:#dcfdff;
  margin:10px;
padding:10px;
left:-34%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
-webkit-transform: translateX(25%) translateY(0%);
-moz-transform: translateX(25%) translateY(0%);
-ms-transform: translateX(25%) translateY(0%);
transform: translateX(25%) translateY(0%);
      
}
​
.modal_right{top:200px;}
 
function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
            mx = mx.getPropertyValue("-webkit-transform") ||
            mx.getPropertyValue("-moz-transform") ||
            mx.getPropertyValue("-ms-transform") ||
            mx.getPropertyValue("-o-transform") ||
            mx.getPropertyValue("transform") || false;
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
        for(var v in values) {  values[v]=Math.ceil(values[v]);  }
        $("#"+element).css({ transform:"matrix("+values.join()+")" } );
}
​
​
$( document ).ready(function() { roundCssTransformMatrix("fixed"); });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MiguelQueirozpro
0viewers