如何将关闭按钮放置到弹出框的末尾

Question

我设计了一个弹出框，我将弹出按钮放置在弹出框的末尾，但是当内容被动态更新到该框时，关闭按钮将从框中移出。

找我的代码一次

#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%;
   }

伙计们看我的javascript代码

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='';
    }

伙计们，请看我的代码，建议我把代码按钮放在弹出的box.Here“演示”的末尾，div保存从ajax响应收到的动态内容。

Html代码：

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

Answer 1

首先，您应该给按钮一个id (比方说close_btn )，并以绝对位置给它顶部和右边：

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

你应该给#box一个相对的位置：

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

我觉得你不需要#box button规则