当用户单击保存按钮时，我需要显示一个提示框，该按钮要求用户提供名称和描述。即
我需要在提示框中分别有 2 个文本字段和 2 个按钮 ok 和 cancel。
如何在 JavaScript/jquery 中做到这一点？我搜索了很多，但没有找到满意的解决方案。
编辑：
prompt("Please enter your name","Harry Potter");
上面的东西允许我显示 1 个文本文件，我可以再有一个吗？
【问题讨论】：
prompt，则必须显示两次
标签： javascript jquery html dialog
很遗憾，内置提示不可自定义，您必须自己构建。例如，我为您制作了这个：http://jsfiddle.net/wared/tm95G/。目前警报显示一个查询字符串作为 GET 参数传递，但您可以修改代码以获取数组，只需将 serialize 替换为 serializeArray（文档：http://api.jquery.com/serializeArray/）。
<form action="javascript:void(0)">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Click here</a></p>
<div class="my-prompt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label>
<span>Name :</span>
<input name="name" type="text" />
</label>
<label>
<span>Description :</span>
<textarea name="desc" rows="4"></textarea>
</label>
<div>
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</form>
body, textarea {
font: normal 12px Arial;
}
.my-prompt {
display: none;
position: absolute;
top: 20px;
left: 50%;
margin-left: -135px;
width: 250px;
background: white;
border: 1px solid #ccc;
padding: 10px;
}
.my-prompt label {
display: block;
padding-right: 6px;
}
.my-prompt label * {
display: block;
width: 100%;
}
.my-prompt span {
display: block;
margin: .5em 0;
}
.my-prompt input, .my-prompt textarea {
padding: 2px;
border: 1px solid #ccc;
}
.my-prompt div {
padding-top: 10px;
text-align: center;
}
$(function () {
$('a').click(function (e) {
e.preventDefault();
$('.my-prompt').show();
});
$('.my-prompt').find('button').click(function () {
var el = $(this),
box = el.closest('.my-prompt').hide();
if (!el.siblings().addBack().index(this)) {
alert(box.find('label :input').serialize());
}
});
});
【讨论】：
添加一个 jquery UI dialog。您可以将其设置为div。 did 可以包含您想要的任意数量的元素。如果你制作dialogmodal，那么后台也会被禁用。
【讨论】：
简单的方法：使用prompt 并显示两次。如果您想在一个弹出窗口中输入两个输入，则无法这样做。
var fname = prompt("what's your first name?");
var lname = prompt("what's your last name?");
正确方法：将文档隐藏在透明的div 后面，然后在上面渲染模态对话框。向对话框内的按钮添加点击处理程序。
<body>
..
<div id="popup">
<div id="popup-content">
</div>
</div>
</body>
...
var $popup = $("#popup")
var $popupContent = $("#popup-content")
...
if($popup.is(":visible")) throw "Can't handle two popups at once";
$fname = $("<input>");
$lname = $("<input>");
$submit = $("<input>", {type: "button"}).on("click", popupDone);
$popupContent.empty().append(
$("<p>").append("first name:", $fname),
$("<p>").append("last name:", $lname),
$submit
)
function popupDone(){
//handle the data:
console.log("your name is " + $fname.val() + " " + $lname.val())
}
...
#popup{
position: fixed;
top: 0; left: 0;
background: rgba(0, 0, 0, 0.5) /* some nice overlay */
}
#popup-content{
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
padding: 10px;
margin: 10px; /* some nice positioning */
}
【讨论】：
您无法自定义纯 javascript 提示，但可以一个接一个地显示。
HTML：
<input id="myButton" type="button" value="Example only Javascript" />
Javascript：
function askNameAndDesc() {
var promptName = window.prompt("Name", "Richard");
var promptDesc = null;
if (promptName !== null) {
promptDesc = window.prompt("Description", "Desc");
}
if (promptName !== null && promptDesc !== null) {
alert('User pressed ok twice');
}
}
// Attach javascript function
document.getElementById('myButton').onclick = askNameAndDesc;
另一种解决方案是使用 JqueryUI 对话框。
HTML：
<input id="myButtonUI" type="button" value="Example JqueryUI" />
<div id="dialogModal" title="Dialog Example">
<input id="nameValue" type="text" value="Name" />
<input id="nameOk" type="button" value="Ok" />
<input id="nameCancel" type="button" value="Cancel" />
<br />
<input id="descValue" type="text" value="Description" />
<input id="descOk" type="button" value="Ok" />
<input id="descCancel" type="button" value="Cancel" />
</div>
Javascript：
// Create JqueryUI Dialog
$("#dialogModal").dialog({
height: 140,
width: 400,
autoOpen: false
});
// Show dialog on button click
$("#myButtonUI").on('click', function () {
$("#dialogModal").dialog('open')
});
// Dialog buttons Click Events
$("#dialogModal").on('click', function (ev) {
$target = $(ev.target);
$me = $(this);
if ($target.is("input[type='button']")) {
$me.dialog('close');
alert('User pressed on ' + $target.get(0).id);
}
});
您可以在此处查看两个示例：http://jsfiddle.net/gBRWy/1/
【讨论】：