CODEWITHSUNDEEP
csspopup
Rama Rao M
Rama Rao M

Reputation: 3071

Create popup with auto width and height

Hi,

I want to create a popup whose content will come from outside, which I want to put that content in a iframe tag of popup.I am not sure how much content will come,It will be either large data or small data. So what I want to achieve is, Popup width&height should be auto adjusted to content width and height,and if the content is too large(if it exceeds body width and height), content div tag must be auto scrolled....Is there a way to achieve...code is appreciated...

Here is my code,What I believe would work(But Its not giving proper output)

<style>
 #irmNPopupContainer{
    display:inline-block;
    border:8px solid rgba(0,0,0,0.4);
    border-radius:8px;      
   }
   #irmNPopupHdr{
    height:30px;
    width:100%;
    background:#e4e4e4;
   }
   #irmNPopupHdr span:first-child{
    padding:0px 0px 0px 5px;
    font-weight:bold;
    color:#333333;
   }
   #irmNPopupHdr span:last-child{
    position:absolute;
    right:2px;
    top:2px;
    cursor:pointer;
   }
   #irmNPopupContent iframe{
    width:100%;
    height:100%;
   }
  </style>

 <body>
   <div id="irmNPopupContainer">
     <div id="irmNPopupHdr"><span>Agreement Search</span><span><img src="badge_cancel_32.png"></span></div>
     <div id="irmNPopupContent">
       <iframe src="http://www.w3schools.com" frameborder=0>
       </iframe>
     </div>
   </div>
 </body>

Upvotes: 0

Views: 1969

Answers (1)

Muhammad Sannan Khalid
Muhammad Sannan Khalid

Reputation: 3137

  1. Y don't you use table instead of divs?
  2. Do you also want to set the iframe height and width? If yes then you need to use easyxdm plugin for resizing ifrmae here is a link for plugin(this will work for cross domain. If domains are same then there is no need for this plugin you can set the width and height by JS code.) http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/

Upvotes: 1

Related Questions