css弹窗大小问题弹窗自定义设置大小

Question

我怎么能让弹出来的这个对话框只出现这么大而不是直接从中间传过去

```c++
#go-icon {  
  position: absolute;  
  top: 50%;  
  left: 50%; 
    
  transform: translate(-50%, -50%);  
}  
  
.modal {
  display: none;  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5);  
  color: #fff;  
}  
  
.modal-content {    
  background-color: #fff;    
  position: absolute;    
  top: 50%;    
  left: 50%;    
  transform: translate(-50%, -50%);    
  width: 200px; /* 设置文本框的宽度 */    
  height: 300px; /* 设置文本框的高度 */
  
  padding: 20px;    
/*  border-radius: 10px;      */
}
 
.close-button {  
  position: absolute;  
  top: 10px;  
  right: 10px;  
  cursor: pointer;  
}

```html

<div class="go-icon" onclick="showModal()">
                <img src="images/go-icon.png">
            </div>         
            <div id="modal" class="modal">  
            <div class="modal-content">  
              <span id="close-button" class="close-button">关闭</span>
              <p id="modal-text">这是自定义文本</p>  
            </div>  
          </div>  

Answer 1

给go-icon一个宽高不行么？