js prompt 样式修改

let userInput = prompt(message, defaultValue);

<div id="customPrompt" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p id="promptMessage">请输入一些文本:</p>
    <input type="text" id="promptInput">
    <button id="promptSubmit">提交</button>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

function customPrompt(message, defaultValue) {
  document.getElementById('promptMessage').textContent = message;
  document.getElementById('promptInput').value = defaultValue || '';
  document.getElementById('customPrompt').style.display = 'block';

  return new Promise((resolve) => {
    document.getElementById('promptSubmit').onclick = function() {
      document.getElementById('customPrompt').style.display = 'none';
      resolve(document.getElementById('promptInput').value);
    };

    document.getElementsByClassName('close-button')[0].onclick = function() {
      document.getElementById('customPrompt').style.display = 'none';
      resolve(null);
    };
  });
}

// 使用自定义的prompt
customPrompt('请输入你的名字:', '').then((name) => {
  console.log('用户输入的名字:', name);
});