CODEWITHSUNDEEP
javascriptjqueryhtml
Sumanth Udupa
Sumanth Udupa

Reputation: 91

How to place close button to the end of popup box

I have designed a popup box I am placing my popup button to the end of the popup box but when contents has been updated dynamically to the box,the close button is moving out of the box.

Look for my code once

#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

  }
  #box_frame{
    width: 100%;
    position: fixed;
    top: 30%;
  }
  #box{
     width: 400px;
     padding: 40px;
     height: 200px;
     margin: auto;
     font-size: 14px;
     background:#e8e8e8;
     border: 1px solid #dadada;
     font-family:sans-serif;
   }
   #box button{
     margin-top: 45%;
   }

Guys look at my javascript code

function open_box(){
      var cont = '<div id="overlay"><div id="box_frame"><div id="box"> '+
              'Select Reviewer:<input type="text" name="name"      onkeyup="load(this.value);" autocomplete="off"/>' +
              '<div id="demo"></div>'+
              '<div id="check"></div>'+
              '<button onclick="javascript:reset_dynamic()">Close</button>'+
              '</div></div></div>';
      document.getElementById("dynamic").innerHTML=cont;
    }
    function reset_dynamic(){
      document.getElementById("dynamic").innerHTML='';
    }

Guys can you please look at my code and suggest me to place the code button to the end of the popup box.Here "demo" div holds the dynamic content received from ajax response.

Html code:

<a href="javascript:open_box()">Select ICR Reviewer</a>
<div id="dynamic"></div>

Upvotes: 0

Views: 586

Answers (1)

Majed DH
Majed DH

Reputation: 1301

first you should give the button an id (let's say close_btn ) and give it top and right with absolute position:

#close_btn {
    position: absolute; 
    top:3px;
    right:3px    
}

and you should give the #box a relative position : 

 #box{
     /* this is to make the absolute button
      relative to this parent */
      position: relative; 
   }

and i think you don't need the #box button rule

Upvotes: 1

Related Questions