Modal-pop-up-fade-in auf öffnen, und klicken Sie auf fade out on close

Ich habe eine ziemlich einfache Frage für einmal. Ich habe die löschen-buttons, modal öffnen pop-ups zu bestätigen oder zu verweigern, löschen. Ich möchte diese modalen pop-ups, fade-in und klicken Sie auf fade out auf "Abbrechen". Ich habe versucht ein paar andere Dinge schon, kein Glück so weit. Ich brauche nur eine einfache Lösung. Vielen Dank im Voraus. Hier ist mein code

<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>
InformationsquelleAutor triplethreat77 | 2013-01-21
  1. 2

    Verwenden .fadeIn() und .fadeOut() auf Ihre id parameter ("delAll1") nicht auf this.

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

    Indem $("#" + id) können Sie ein element auswählen, indem Sie seine id, das ist "#" + id.

    Sehen Sie es hier.

    Hinweis: Ändern von onLoad zu no wrap (head) unter Rahmen auf der linken sidebar zu fixieren, den scope-Ausgabe.

    • #delModal? Meine id für das div ist dellAll1, delSon und so weiter. Können Sie zeigen ein jsfiddle Beispiel? Ansonsten ist der code sieht perfekt aus, nur nicht für mich arbeiten.
    • Schöne, einfache Lösung. Vielen Dank @Alexander
    • perfekt! Ich hatte einen Tippfehler in meinem edit. Auch, vergessen Sie nicht zu markieren, der die meisten hilfreiche Antwort Ihre Fragen
    • Ich habe schon wieder ein Problem, egal wie ich word es, niemand scheint zu Antworten haben für. Vielleicht machst du? @Alexander stackoverflow.com/questions/14463030/...
    InformationsquelleAutor Alexander
  2. 1

    War ich nicht zufrieden mit deinen ersten beiden Kommentaren, so habe ich eine neue Geige:

    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

    Dadurch können Sie hinzufügen, mehrere löschen-Schaltflächen, jede mit Ihrer eigenen modals.

    Gibt es einen Kommentar in das JS darüber, wie Sie herausfinden, welche modal gedrückt wurde, da bei dieser Lösung ist die ID unabhängig.

    InformationsquelleAutor mattdlockyer
  3. 0

    Verwenden fadeIn() auf der rechten Selektor('#'+id), this im aktuellen Kontext wäre das Globale Objekt.

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

    DEMO

    InformationsquelleAutor Musa
  4. 0

    Warum verwenden Sie keine id für jede Schaltfläche, wie diese

    <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>

    Und das jquery-wie dies

    $("#show").click(function() {
        $("#delAll1").fadeIn();
    });
$("#delete").click(function() {
        $("#delAll1").fadeOut();
    });
    • Ihre Antwort, obwohl Sie die am nächsten an der tatsächlichen jquery, wird nicht funktionieren, wenn der Benutzer die Taste löschen in der modal-box. Müssen Sie ändern Sie Abbrechen input id auf "Abbrechen" und die zweite Funktion wäre dies. $("#cancel, #delete").click(function() { $("#delAll1").fadeOut(); });
    InformationsquelleAutor kilkadg
Schreibe einen Kommentar