JSFiddle - React, Tailwind, and code Playground

by ramstheroyal

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <a href="#" onClick="showIrmNPopup('Billback','http://www.w3schools.com','400','400')">W3 Schools</a> <br/> <br/>
 <a href="#" onClick="showIrmNPopup('Chargeback','http://www.atozmp3.com','600','600')">A to Z MP3</a>

 <div id="irmNBgBlockWindow"></div>

 <div id="irmNPopupContainer" >
     <div id="irmNPopupHdr"><span>Agreement Search</span><span><img src="round_black_close.png" title="Close"></span></div>
     <div id="irmNPopupContent" >
       <iframe frameborder=0 id="irmNPopupContentFrame" name="irmNPopupContentFrame" scrolling=auto
        width="100%" height="100%"> </iframe>
     </div>
 </div>

CSS

#irmNBgBlockWindow{
   background:#494949 url('background-stripes.gif');
   opacity:0.4;
   display:none;
   position:absolute;
   left:0px;
   top:0px;
  }

   #irmNPopupContainer{
    display:inline-block;
    border:8px solid rgba(0,0,0,0.4);
    border-radius:8px;
    position:absolute;
    display:none;
   }
   #irmNPopupHdr{
    height:6%;
    width:100%;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FEFEFE', EndColorStr='#DDDDDD');
   }
   #irmNPopupHdr span:first-child{
    padding:0px    0px 0px 5px;
    font-weight:bold;
    color:#333333;
    vertical-align:middle;
   }
   #irmNPopupHdr span:last-child{
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;    
   }
   #irmNPopupContent{
    width:100%;
    height:94%;
    *overflow:auto;
   }

JavaScript

function showIrmNPopup(_title,_src,_width,_height){
    //Show Window Blocker
   $('#irmNBgBlockWindow').show();
   var height= $('html').outerHeight();
   var width= $('html').outerWidth();
   $('#irmNBgBlockWindow').outerWidth(width);
   $('#irmNBgBlockWindow').outerHeight(height);

  //Assign source to iframe and set width and height of the iframe
   var iframeObj = document.getElementById('irmNPopupContentFrame');
   iframeObj.src = _src;
 
   //alert(document.getElementById('irmNPopupContentFrame').src);
   $('#irmNPopupHdr span:first-child').text(_title);
   $('#irmNPopupContainer').show(2000);
   $('#irmNPopupContainer').outerWidth(_width);
   $('#irmNPopupContainer').outerHeight(_height);
   
    alert(document.getElementById('irmNPopupContainer').style.width);
   
  }