用js和cs写一个移动端带输入框的弹窗

好的，以下是一个简单的用JS和CSS实现的移动端带输入框的弹窗的代码：

HTML代码：

<div class="popup">
  <div class="popup-content">
    <h2>请输入您的信息</h2>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="邮箱">
    <button>提交</button>
  </div>
</div>

CSS代码：

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.popup-content h2 {
  margin-top: 0;
}

.popup-content input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popup-content button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

JS代码：

const popup = document.querySelector('.popup');
const popupContent = document.querySelector('.popup-content');
const closeButton = document.querySelector('.close-button');

function openPopup() {
  popup.style.display = 'flex';
}

function closePopup() {
  popup.style.display = 'none';
}

popup.addEventListener('click', function(event) {
  if (event.target === popup) {
    closePopup();
  }
});

closeButton.addEventListener('click', closePopup);

这个弹窗会在页面中央显示一个半透明的黑色背景，弹窗内容包括一个标题、两个输入框和一个提交按钮。用户可以在输入框中输入姓名和邮箱，然后点击提交按钮。如果用户点击弹窗外的区域或者关闭按钮，弹窗会关闭。