-1

当用户单击保存按钮时，我需要显示一个提示框，该按钮要求用户提供名称和描述。IE

我需要在提示框中分别有 2 个文本字段和 2 个按钮 ok 和 cancel。

如何在 JavaScript/jquery 中做到这一点？我搜索了很多，但没有找到满意的解决方案。

编辑 ：

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

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

4

4 回答 4

0

The easy way: use prompt and show it twice. If you want two inputs in one popup, this can't be done.

var fname = prompt("what's your first name?");
var lname = prompt("what's your last name?");

The correct way: hide the document behind a transparent div, then render the modal dialog on top of it. Add a click handler to a button inside the dialog.

<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 */
}
于 2013-08-23T10:24:29.617 回答
0

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

于 2013-08-23T09:55:11.287 回答
0

不幸的是，内置提示不可自定义，您必须自己构建。作为一个例子，我为你做了这个：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());
        }
    });
});
于 2013-12-14T10:34:03.670 回答
0

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

于 2013-08-23T10:32:06.087 回答