Question

当用户点击输入按钮时，它会将某些值传递给数据库。但是，在此之前，我需要通过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()部分中遗漏了哪些内容才能使其正常工作？

Answer 1

仔细看看，通过将不透明度设置为0来隐藏模态，将其置于成功回调中：

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

修改

请参阅此处了解AJAX请求的更新示例 http://jsfiddle.net/xVDte/25/

在CSS中我添加了一个类：

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

然后添加和删除成功回调和关闭按钮
的show类

Answer 2

如果您的AJAX请求的数据类型是JSON，则表示您的success方法的data参数应该是对象而不是字符串。您需要解析代码中的对象，并从包含它的任何对象中提取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/

如何通过ajax提交输入按钮时显示模态弹出窗口

2 个答案: