我需要顯示一個提示框，當用戶點擊保存按鈕時，會詢問用戶的名字和描述。即如何在javascript/jquery中顯示提示框？
我需要在提示框上分別有兩個文本字段和兩個按鈕ok和cancel。
我該如何在JavaScript/jQuery中做到這一點？我搜索了很多，但沒有找到滿意的解決方案。
編輯：
prompt("Please enter your name","Harry Potter");
上面的東西可以讓我展現1個文本提交，我可以有另外一個呢？
簡單的方法：使用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/
不幸的是，內置的提示是不能自定義，你會必須建立自己的。作爲一個例子，我已經爲你做了這個：http://jsfiddle.net/wared/tm95G/。目前該警報顯示一個查詢字符串作爲GET參數傳遞，但您可以修改代碼以獲取數組，而只需將serialize替換爲serializeArray（doc：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());
}
});
});
，如果你想使用'prompt'，你必須表現出兩次 –