设计javascript'；默认的提示框

我想使用JavaScript的提示符从用户那里获取一个值。我写这个代码。。。但这太简单了。如何使用css或任何其他工具进行设计

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

---

唯一的解决方法是使用html css和javascript创建自己的提示符。请参阅下面的示例，您可以对其进行扩展

/*显示提示插件*/
var showPrompt=（函数（）{
var promptEl=document.querySelector（'.prompt'），
_cb=null；
变量提示={
艾尔：promptEl，
形式：promptEl.querySelector（'.prompt\u form'），
text:promptEl.querySelector（'.prompt\u text'），
输入：promptEl.querySelector（'.prompt\u input'），
提交：promptEl.querySelector（'.prompt\u submit'）
}
prompt.form.addEventListener（'submit'，hide，false）；
功能显示（文本，cb）{
prompt.el.classList.add（'prompt--show'）；
prompt.text.innerHTML=文本；
_cb=cb；
}
函数隐藏（e）{
e、 预防默认值（）；
remove（'prompt--show'）；
_cb.call（prompt，prompt.input.value）；
}
回归演出；
})();
//显示提示
showPrompt（'在此处输入文本'，函数（答案）{
日志（'prompt submitted'，response）；
});
*{
框大小：边框框；
}
.提示{
/*使背景全屏显示*/
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（40,40,40,37）；
/*使其显示在所有其他元素之上*/
z指数：999；
/*默认情况下隐藏提示*/
可见性：隐藏；
不透明度：0；
过渡：.6s不透明度，.6s可见性；
}
.提示表格{
/*将提示窗口居中*/
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
填充：1em；
背景：#e5；
}
.提示--show{
能见度：可见；
不透明度：1；
}
.prompt\u输入{
宽度：80%；
浮动：左；
}
.提示提交{
宽度：20%；
浮动：左；
}


我想使用JavaScript的提示符从用户那里获取一个值。我写这个代码。。。但这太简单了。如何使用css或任何其他工具进行设计？函数textPrompt（）{var text=prompt（“Enter text”）；}，因为它是一个
系统对象
，与
css
没有任何关系。创建自己的
absolute/fixed
positioned元素并对其进行样式设置。许多小部件也可用。是否有其他方法可以使用？我只需要获取一些文本，然后使用javascript将文本存储在变量中，这可能会对您有所帮助。。