Nifty Modal – 如何在没有按钮的情况下触发模态

这个脚本提供了很棒的模态转换，我想使用它们而不是标准的警报消息。

现在，脚本的演示显示了如何通过按来触发它们，但是我在查找如何以if statement为例显示模态时遇到了一些麻烦。

这是链接到按钮的代码。

//此部分位于另一个文件中，该文件导入到按钮所在的html文件中。

 $(document).ready(function(){ $(".md-trigger").modalEffects(); }); 

//当按钮有类时触发该函数，但我需要它独立于工作类，或者至少可以通过链接到按钮来触发它

Warning

问题：如何通过if语句触发漂亮的模态？

Answer 1

您可以将类“md-show”添加到您用作模式对话框的div元素中

div示例：

如果你使用jQuery

通过id查询div元素以动态添加类

 $("#div_modal").addClass("md-show"); 

要关闭模态，只需删除该类

 $("#div_modal").removeClass("md-show"); 

我希望有所帮助

Answer 2

使用addClass和removeClass并没有给我最好的结果。 我找不到源代码，但我使用的是Nifty Modal的jQuery版本，它允许显式调用show和hide方法。

 $("#div-modal").niftyModal("show"); $("#div-modal").niftyModal("hide"); 

注意：我不是该文件的作者： jquery.modalEffects.js：

 //Button Trigger (function ($) { var $this = new Object(); var methods = { init: function (options) { $this = $.extend({}, this, methods); $this.searching = false; $this.o = new Object(); var defaultOptions = { overlaySelector: '.md-overlay', closeSelector: '.md-close', classAddAfterOpen: 'md-show', modalAttr: 'data-modal', perspectiveClass: 'md-perspective', perspectiveSetClass: 'md-setperspective', afterOpen: function (button, modal) { //do your stuff }, afterClose: function (button, modal) { //do your suff } }; $this.o = $.extend({}, defaultOptions, options); $this.n = new Object(); var overlay = $($this.o.overlaySelector); $(this).click(function () { var modal = $('#' + $(this).attr($this.o.modalAttr)), close = $($this.o.closeSelector, modal); var el = $(this); $(modal).addClass($this.o.classAddAfterOpen); /* overlay.removeEventListener( 'click', removeModalHandler ); overlay.addEventListener( 'click', removeModalHandler ); */ $(overlay).on('click', function () { removeModalHandler(); $this.afterClose(el, modal); $(overlay).off('click'); }); if ($(el).hasClass($this.o.perspectiveSetClass)) { setTimeout(function () { $(document.documentElement).addClass($this.o.perspectiveClass); }, 25); } $this.afterOpen(el, modal); setTimeout(function () { modal.css({ 'perspective': 'none' }); //3D Blur Bug Fix if (modal.height() % 2 != 0) { modal.css({ 'height': modal.height() + 1 }); } }, 500); function removeModal(hasPerspective) { $(modal).removeClass($this.o.classAddAfterOpen); modal.css({ 'perspective': '1300px' }); if (hasPerspective) { $(document.documentElement).removeClass($this.o.perspectiveClass); } } function removeModalHandler() { removeModal($(el).hasClass($this.o.perspectiveSetClass)); } $(close).on('click', function (ev) { ev.stopPropagation(); removeModalHandler(); $this.afterClose(el, modal); }); }); }, afterOpen: function (button, modal) { $this.o.afterOpen(button, modal); }, afterClose: function (button, modal) { $this.o.afterClose(button, modal); } }; $.fn.modalEffects = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.modalEffects'); } }; function is_touch_device() { return !!("ontouchstart" in window) ? 1 : 0; } })(jQuery); //Nifty Modal ; (function ($) { $.fn.niftyModal = function (method) { var defaults = { overlaySelector: '.md-overlay', closeSelector: '.md-close', classAddAfterOpen: 'md-show', modalAttr: 'data-modal', perspectiveClass: 'md-perspective', perspectiveSetClass: 'md-setperspective', afterOpen: function (modal) { //do your stuff }, afterClose: function (modal) { //do your suff } } var config = {} var methods = { init: function (options) { return this.each(function () { config = $.extend({}, defaults, options); var modal = $(this); //Show modal helpers.showModal(modal); }); }, toggle: function (options) { return this.each(function () { config = $.extend({}, defaults, options); var modal = $(this); if (modal.hasClass(config.classAddAfterOpen)) { helpers.removeModal(modal); } else { helpers.showModal(modal); } }); }, show: function (options) { config = $.extend({}, defaults, options); return this.each(function () { helpers.showModal($(this)); }); }, hide: function (options) { config = $.extend({}, defaults, options); return this.each(function () { helpers.removeModal($(this)); }); } } var helpers = { removeModal: function (mod) { mod.removeClass(config.classAddAfterOpen); $(document.documentElement).removeClass(config.perspectiveClass); mod.css({ 'perspective': '1300px' }); mod.trigger('hide'); }, showModal: function (mod) { var overlay = $(config.overlaySelector); var close = $(config.closeSelector, mod); mod.addClass(config.classAddAfterOpen); //Overlay Click Event overlay.on('click', function (e) { var after = config.afterClose(mod, e); if (after === undefined || after != false) { helpers.removeModal(mod); overlay.off('click'); } }); //Fire after open event config.afterOpen(mod); setTimeout(function () { mod.css({ 'perspective': 'none' }); //3D Blur Bug Fix if(mod.height() % 2 != 0){mod.css({'height':mod.height() + 1});} }, 500); //Close Event close.on('click', function (ev) { var after = config.afterClose(mod, ev); if (after === undefined || after != false) { helpers.removeModal(mod); overlay.off('click'); } ev.stopPropagation(); }); mod.trigger('show'); } } if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method "' + method + '" does not exist in niftyModal plugin!'); } } })(jQuery); 

Answer 3

只需调用$("#your element").niftyModal("show");

Answer 4

  Danger  
 
 
 
  
 
 
 
 
Danger!
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce ultrices euismod lobortis.
 
 Cancel Proceed 
 
 
 
 
 
  

$（ “＃sendClick”）点击（）。

嗨！

Answer 5

可能是“overlay.off（’click’）;”附近有错误。 这行应该是“close.off（’click’）;”

Answer 6

我使用以下代码

 $(document).ready(function () { openpop(); }) function openpop(){ var overlay = document.querySelector( '.md-overlay' ); var modal = document.querySelector('#modal-11'), close = modal.querySelector( '.md-close' ); function removeModal( hasPerspective ) { classie.remove( modal, 'md-show' ); if( hasPerspective ) { classie.remove( document.documentElement, 'md-perspective' ); } } function removeModalHandler() { removeModal( classie.has( modal, 'md-setperspective' ) ); } classie.add( modal, 'md-show' ); overlay.removeEventListener( 'click', removeModalHandler ); overlay.addEventListener( 'click', removeModalHandler ); if( classie.has( modal, 'md-setperspective' ) ) { setTimeout( function() { classie.add( document.documentElement, 'md-perspective' ); }, 25 ); } close.addEventListener( 'click', function( ev ) { ev.stopPropagation(); removeModalHandler(); }); }