0

当用户单击输入按钮时，它会将某些值传递给数据库。但是，在此完成之前，我需要通过 ajax 添加一个确认对话框。

<input type="button" class="finished" value="Next &raquo;" id="Save" />
 <div id="save-modal" class="modal-dialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Done!</h2>
      <p>You just updated your profile.<br />Here is your new information!</p>
    </div>
 </div>​

这个 div 默认是隐藏的：

            .modal-dialog {
                position: fixed;
                font-family: Arial, Helvetica, sans-serif;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: rgba(0,0,0,0.8);
                z-index: 99999;
                opacity:0;
                color: white;
                -webkit-transition: opacity 400ms ease-in;
                -moz-transition: opacity 400ms ease-in;
                transition: opacity 400ms ease-in;
                pointer-events: none;
            }
            .modal-dialog:target {
                opacity:1;
                pointer-events: auto;
            }

            .modal-dialog > div {
                width: 230px;
                position: relative;
                margin: 10% auto;
                padding: 16px 20px 21px 20px;
                border-radius: 4px;
                background: #003c62;
                border: 2px white solid;
                box-shadow: inset 0 0 17px 3px rgba(127, 219, 248, .34) ,1px 1px 19px white;
            }
            modal-dialog h2 {
                font: 14px sans-serif;
                text-transform: uppercase;
            }
            .modal-dialog p {
                color: white;
                text-shadow: none;
                text-transform: none;
                font-size: 14px;
            }
            .close {
                background: #1E2D5C;
                color: white;
                line-height: 24px;
                position: absolute;
                right: -12px;
                text-align: center;
                top: -10px;
                width: 26px;
                text-decoration: none;
                font-weight: bold;
                border: 1px solid #666;
                border-radius: 12px;
                box-shadow: 1px 1px 3px #000;
            }

            .close:hover { background: #00d9ff; }

​ 并且应该使用 $ajax() 来完成

$("#Save").click(function () {
    $.ajax({
        url: baseUrl + '/Folder',
        type: 'POST',
        data: JSON.stringify(values),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },
        success: function (data) {
            $('#save-modal').html(data);
        },
        async: true
    });
});

如果单击<a href="#save-modal">Modal</a>，该模式可以正常工作，但我不想使用它。

我在success:此功能的一部分中缺少什么ajax()以使其正常工作？

4

2 回答 2

2

仔细看，通过将 opacity 设置为 0 来隐藏模态，将其放入成功回调中：

  $("#save-modal").css("opacity",1);

编辑：

有关 AJAX 请求的更新示例，请参见此处 http://jsfiddle.net/xVDte/25/

在 CSS 中，我添加了一个类：

.modal-dialog.show{
    opacity:1;
    pointer-events:auto;
}

然后为成功回调和关闭按钮添加和删除显示类

于 2012-12-29T00:13:19.107 回答
0

如果您的 AJAX 请求的数据类型是 JSON，这意味着您的成功方法的数据参数应该是对象而不是字符串。您需要解析代码中的对象并从包含它的任何对象成员中提取 HTML。或者，如果处理此 ajax 请求的 PHP（或 ASP）文件返回原始 HTML，请更改您的 dataType:'html'。

success : function(data)
{
    // Use Chrome or Firefox and you can view this in the debug console.
    console.log(data);

    // We will assume that data.content is the HTML to fill the modal with.
    $("#save-modal").html(data.content);
},

http://api.jquery.com/jQuery.ajax/

于 2012-12-29T00:19:09.043 回答