设计javascript的默认提示框

Question

我希望使用JavaScript的提示从用户那里获取值。我写这段代码......但它太简单了。如何用css或任何其他设计它？

function textPrompt(){
  var text = prompt("Enter text");
}

Answer 1

唯一的方法是使用html css和javascript创建自己的提示。请参阅下面的示例，您可以展开。

＆＃13;

＆＃13;

/* show Prompt plugin */
var showPrompt = (function(){
  
  var promptEl = document.querySelector('.prompt'),
    _cb = null;
  
  var prompt = {
    el: promptEl,
    form: promptEl.querySelector('.prompt__form'),
    text: promptEl.querySelector('.prompt__text'),
    input: promptEl.querySelector('.prompt__input'),
    submit: promptEl.querySelector('.prompt__submit')
  }
  
  prompt.form.addEventListener('submit', hide, false);

  function show( text, cb ){
    prompt.el.classList.add('prompt--show');
    prompt.text.innerHTML = text;
    _cb = cb;
  }

  function hide( e ){
    e.preventDefault();
    prompt.el.classList.remove('prompt--show');
    _cb.call( prompt, prompt.input.value );
  }
  
  
  return show;
  
})();

// show the prompt
showPrompt('Enter Your Text Here', function( answer ){
  console.log( 'prompt submitted', answer );
});

＆＃13;

* {
  box-sizing: border-box;
}

.prompt {
  /* make the backgronud full screen */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(40,40,40,.37);
  
  /* make it show on top of all other elements */
  z-index: 999;
  
  /* hide the prompt by default */
  visibility: hidden;
  opacity: 0;
  
  transition: .6s opacity, .6s visibility;
}

.prompt__form {
  /* center the prompt window */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  width: 400px;
  padding: 1em;
  
  background: #e5e5e5;
}

.prompt--show {
  visibility: visible;
  opacity: 1;
}

.prompt__input {
  width: 80%;
  float: left;
}

.prompt__submit {
  width: 20%;
  float: left;
}

＆＃13;

<!-- include this before the closing body tag -->
<article class="prompt">
  <form class="prompt__form">
    <p class="prompt__text"><p>
    <input type="text" class="prompt__input" />
    <input type="submit" class="prompt__submit" value="submit" />
  </form>  
</article>

＆＃13;

＆＃13;

＆＃13;