Modal pop-up se desvanecen en abrir y haga clic en fade out en el cierre

Tengo bastante simple cuestión de una vez. He eliminar los botones que se pueden abrir modal pop ups para confirmar o negar su eliminación. Me gustaría que estos modal pop ups para que aparezcan en haga clic en y fade out en cancelar. Yo he probado un par de cosas diferentes ya, sin suerte hasta el momento. Sólo necesito una solución simple. Gracias de antemano. Aquí está mi código

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

  1. 3

    Uso .fadeIn() y .fadeOut() en su id parámetro ("delAll1") no en this.

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

    Mediante, $("#" + id) puede seleccionar un elemento por su id, que "#" + id.

    Se ve aquí.

    Nota: Cambio de onLoad a no wrap (head), en el marco de la izquierda de la barra lateral para solucionar el problema de ámbito.

    • #delModal? Mi id para que la vid es dellAll1, delSon y así sucesivamente. Se puede mostrar un jsfiddle ejemplo? De lo contrario, el código se ve perfecto, simplemente no funciona para mí.
    • Hermosa y sencilla solución. Muchas gracias @Alexander
    • perfecto! Tuve un error en mi edición. También, no olvides marcar la más útil responder a sus preguntas
    • Yo tengo otro problema que no importa cómo la palabra, a nadie parece tener las respuestas para. Tal vez usted hacer? @Alexander stackoverflow.com/questions/14463030/…
  2. 2

    Yo no estaba satisfecho con sus dos primeros comentarios, así que hizo un nuevo violín:

    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

    Esto te permitirá agregar eliminar varios botones, cada uno con sus propios modales.

    Hay un comentario en el JS acerca de cómo averiguar qué modal ha sido presionado, ya que esta solución es ID independiente.

  3. 0

    Uso fadeIn() a la derecha del selector('#'+id), this en el contexto actual sería el objeto global.

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

    DEMO

  4. 0

    ¿Por qué no utilizar un identificador para cada botón como este

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

    Y jquery como este

    $("#show").click(function() {
            $("#delAll1").fadeIn();
        });
    $("#delete").click(function() {
            $("#delAll1").fadeOut();
        });
    • Su respuesta, aunque la más cercana a la real jquery, no funcionará si el usuario pulsa en eliminar en el cuadro de modal. Sería necesario para cambiar Cancelar la entrada id a «cancelar» y la segunda función sería este. $("#cancel, #delete").click(function() { $("#delAll1").fadeOut(); });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea