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

よく見ると、不透明度を0に設定することでモーダルが非表示になり、これを成功コールバックに入れます。

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

編集：

AJAXリクエストの更新された例についてはこちらをご覧ください http://jsfiddle.net/xVDte/25/

CSSでクラスを追加しました：

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

次に、成功コールバックと閉じるボタンのshowクラスを追加および削除します

于 2012-12-29T00:13:19.107 に答える
0

AJAXリクエストのデータ型がJSONの場合、successメソッドへのデータ引数は文字列ではなくオブジェクトである必要があることを意味します。コード内のオブジェクトを解析し、オブジェクトメンバーに含まれているものから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 に答える