4

簡単な質問が一度あります。削除を確認または拒否するためにモーダルポップアップを開く削除ボタンがあります。これらのモーダルポップアップは、クリックするとフェードインし、キャンセルするとフェードアウトします。私はすでにいくつかの異なることを試しましたが、今のところ運がありません。簡単な解決策が必要です。前もって感謝します。これが私のコードです

<style>
div.delModal
{   
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
    width:160px;
    text-align:right
}
</style>
<script>
function showModal(id) {
        document.getElementById(id).style.display = 'block';
        //$(this).fadeIn('slow');
    }
    function hideModal(id) {
        document.getElementById(id).style.display = 'none';
    }

</script>
</head>

<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">

<div class="delModal" style="display:none" id="delAll1">
  <img src="images/warning.png" />&nbsp;Are you sure you want to delete vessel and the corresponding tanks?<br />
    <input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>     
    <input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
4

4 に答える 4

5

をではなく、パラメータ（）で使用.fadeIn()し.fadeOut()ます。id"delAll1"this

function showModal(id) {
    $("#" + id).fadeIn('slow');
}
function hideModal(id) {
    $("#" + id).fadeOut('slow');
}

を使用すると$("#" + id)、要素をそのによって選択できます。idつまり、です"#" + id。

こちらをご覧ください。

注：スコープの問題を修正するには、左側のサイドバーのフレームワークの下からonLoadに変更します。no wrap (head)

于 2013-01-21T21:27:22.633 に答える
2

最初の2つのコメントに満足できなかったので、新しいフィドルを作成しました。

http://jsfiddle.net/dkmkX/

$(document).ready(function () {
$('.deleteButton').each(function (i) {
    var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
    var deleteModal = $(this).parent().find('.deleteModal');
    $(this).click(function (e) {
        deleteModal.fadeIn('slow');
    });
    $(this).parent().find('.modalDelete').click(function (e) {
        deleteModal.fadeOut('slow');
    });
    $(this).parent().find('.modalCancel').click(function (e) {
        deleteModal.fadeOut('slow');
    });
});
}); //ready

これにより、それぞれ独自のモーダルを持つ複数の削除ボタンを追加できます。

このソリューションはIDに依存しないため、どのモーダルが押されたかを確認する方法についてJSにコメントがあります。

于 2013-01-21T21:44:33.103 に答える
0

fadeIn()右側のselector（'#'+id）で使用するthisと、現在のコンテキストではグローバルオブジェクトになります。

function showModal(id) {   
    $('#'+id).fadeIn();
    //$(this).fadeIn('slow');
}
function hideModal(id) {
    $('#'+id).fadeOut();
}

デモ

于 2013-01-21T21:29:54.203 に答える
0

このように各ボタンにidを使用しないのはなぜですか

<input type ="button" value="show" id="show">

<div class="delModal" style="display:none" id="delAll1">
  <img src="images/warning.png" />&nbsp;Are you sure you want to delete vessel and the corresponding tanks?<br />
    <input type="button" value="Cancel" class="hide" id="delete"/>     
    <input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>

そしてこのようなjquery

$("#show").click(function() {
        $("#delAll1").fadeIn();
    });
$("#delete").click(function() {
        $("#delAll1").fadeOut();
    });
于 2013-01-21T21:34:56.067 に答える