Question

当用户点击“保存”按钮时，我需要显示一个提示框，该按钮会询问用户名称和描述。即。

我需要2个文本字段和2个按钮确定并分别取消提示框。

我如何在JavaScript / jquery中执行此操作？我搜索了很多，但没有找到满意的解决方案。

修改：

prompt("Please enter your name","Harry Potter");

上面的东西允许我显示1个文本，我可以在那里有另一个吗？

Answer 1

添加jquery UI dialog。您可以将其设置为div。 did可以包含您想要的任意数量的元素。如果您制作dialog modal，则背景也会被停用。

Answer 2

简单方法：使用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 */
}

Answer 3

您无法自定义纯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/

Answer 4

不幸的是，内置提示不可自定义，您必须自己构建。作为一个例子，我已经为你做了这个：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());
        }
    });
});

如何在javascript / jquery中显示提示框？

4 个答案: