写一个弹窗组件 使用原生js

好的，我可以帮您回答关于前端开发的问题。对于弹窗组件，您可以使用原生 JavaScript 来创建一个模态框，并利用相关的 CSS 样式进行美化。您可以参考以下示例代码：

HTML 代码：

<button id="myBtn">打开弹窗</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是一个模态框。请在此处添加你的内容。</p>
  </div>
</div>

CSS 代码：

.modal { 
  display: none; 
  position: fixed; 
  z-index: 10; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.5); 
} 
.modal-content { 
  background-color: #fefefe; 
  margin: 15% auto; 
  padding: 20px; 
  border: 1px solid #888; 
  width: 80%; 
} 
.close { 
  color: #aaa; 
  float: right; 
  font-size: 28px; 
  font-weight: bold; 
} 
.close:hover, .close:focus { 
  color: black; 
  text-decoration: none; 
  cursor: pointer; 
}

JavaScript 代码：

var modal = document.getElementById("myModal"); 
var btn = document.getElementById("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 

btn.onclick = function() { 
  modal.style.display = "block"; 
} 

span.onclick = function() { 
  modal.style.display = "none"; 
} 

window.onclick = function(event) { 
  if (event.target == modal) { 
    modal.style.display = "none"; 
  } 
} 

以上就是一个简单的模态框代码实现。当点击按钮时，模态框会弹出显示。当点击关闭按钮或模态框的任意位置时，模态框会关闭隐藏。您可以根据自己的需求进一步优化这个组件。希望对您有所帮助！