SimpleModal, Как закрыть всплывающее окно с анимацией

Question

Я очень новичок в jQuery. У меня есть квесты о SimpleModal.

Я пытаюсь закрыть всплывающее окно с эффектом анимации, но не удалось.

Вот мой код.

Когда я нажимаю на ссылку «Закрыть», ничего не происходит. Любая помощь, пожалуйста? Большое спасибо!

Answer 1

Вот код, который отлично работает.

$('#btnOpen').click(function(e) { 
      $('#content').modal({ 
       onOpen: function(dialog) { 
        dialog.overlay.fadeIn('slow', function() { 
         dialog.data.hide(); 
         dialog.container.fadeIn('slow', function() { 
          dialog.data.slideDown('slow'); 

         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('slow', function() { 
         dialog.container.slideUp('slow', function() { 
          dialog.overlay.fadeOut('slow', function() { 
           $.modal.close(); // must call this! 
          }); 
         }); 
        }); 
       } 
      }); 

     }); 
     $('#btnClose').click(function(e) { 
      $.modal.close(); 

     }); 

Answer 2

Оригинал, принятый ответ

ничего не происходит, потому что вы неправильно btnClose в вашем ID тегов HTML (вы вызываете его btnCloset). Тем не менее, это не сработало бы с предоставленным кодом, так как это именно то, что он делает: когда вы нажимаете на ссылку btnClose, вы создаете простоеМодальное поле из #content и говорите ему, что когда оно закрывается, оно должно делать вещи в опции onClose (что является правильным). Таким образом, вы на самом деле не говорите ему, чтобы он закрывался где-то, просто говоря, что это модальный диалог.

Вместо этого вы должны создать модальный элемент #content, как и сейчас, но делайте это отдельно от события клика . Затем вы должны связать событие click, чтобы закрыть диалоговое окно.

Вот код

$(function() { 
    /* Make #content a modal */ 
    $("#content").modal(
    { 
     onClose: function(dialog) { 
      dialog.data.fadeOut('slow', function() { 
       dialog.container.slideUp('slow', function() { 
        dialog.overlay.fadeOut('slow', function() { 
         $.modal.close(); // must call this! 
        }); 
       }); 
      }); 

     } 
    } 
    ); 

    /* When #btnClose is clicked, close the modal */  
    $('#btnClose').click(function(e) { 
     $.modal.close(); 
    }); 
}); 

---

Как примечание стороны, если вы добавляете класс simplemodal-close к #btnClose, SimpleModal автоматически делает его закрыть диалоговое окно, и вы не должны привязать щелкните событие самостоятельно.

Новый ответ, основанный на обратной связи

Хорошо, я понял, как это аддон работает, я думал, что это было похоже на обычный диалоговое плагин JQuery, но, как я теперь понимаю, цель состоит в том, чтобы сделать существующий, видимый element a dialog и при его закрытии преобразуйте его обратно в исходную форму. Новый код отслеживает состояние диалога (сохраняя doOpen в data ссылки и переключая его на каждый клик), и оба открывают и закрывают диалог. Надеюсь, это ближе к тому, как вы хотели бы работать :)

$(function() { 
    $("#btnClose") 
    .data("doOpen", true) 
    .click(function() { 
     /* check whether or not we are to open or close the dialog */ 
     var doOpen = $(this).data("doOpen"); 
     /* toggle the data */ 
     $(this).data("doOpen", !doOpen); 

     if (doOpen) { 
      $("#content").modal({ 
       onClose: function(dialog) { 
        dialog.data.fadeOut('slow', function() { 
         dialog.container.slideUp('slow', function() { 
          dialog.overlay.fadeOut('slow', function() { 
           $.modal.close(); // must call this! 
          }); 
         }); 
        }); 
       } 
      }); 
     } 
     else { 
      $.modal.close(); 
     } 
    }); 
});