Jquery 漂亮的模态-如何触发一个没有按钮模态

提供很棒的模式转换，我想用它们代替标准的警报消息

现在，该脚本的演示演示了如何通过按

来触发它们，但我在查找如何显示模式时遇到了一些问题，例如，由于

if语句

这是链接到按钮的代码

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

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

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

<button data-modal="modal-1" data-toggle="modal" data-target="#mod-warning" type="button" class="md-trigger btn btn-warning btn-flat"><i class="fa fa-warning"></i> Warning</button>

警告

问题：如何作为if语句的结果触发漂亮的模态？

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

div示例：

<div class="md-modal colored-header" id="div_modal">
    <div class="md-content">
        <div class="modal-header">
        </div>
        <div class="modal-body form">
        </div>
        <div class="modal-footer">
        </div>
     </div>
</div>
<div class="md-overlay"></div>

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

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

---

我希望使用addClass和removeClass不会给我带来最好的结果。我找不到源代码，但我使用的是一个jQuery版本的Nifty model，它允许显式调用show和hide方法

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

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

---

可能在“overlay.off（'click'）；”附近有bug。这一行应该是“close.off（'click'）；”

只需调用

$（“#您的元素”）。niftmodal（“show”）

危险
危险！
我的同僚们都坐在我的位子上，奉献给精英们

取消
继续

$（“#发送单击”）。单击（）

嗨
 我使用以下代码

$(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();
        });
    }

这对我很有用（Nifty v2.6）

//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);

<!-- Hidden Button Modal -->
    <button style="display:none" data-toggle="modal" data-target="#mod-danger" id="sendClick" type="button" class="btn btn-danger">Danger</button>
<!-- Show  Button Modal -->
  <div id="mod-danger" tabindex="-1" role="dialog" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" data-dismiss="modal" aria-hidden="true" class="close"><span class="s7-close"></span></button>
          </div>
          <div class="modal-body">
            <div class="text-center">
              <div class="text-danger"><span class="modal-main-icon s7-close-circle"></span></div>
              <h3 class="mb-4">Danger!</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Fusce ultrices euismod lobortis.</p>
              <div class="mt-6">
                <button type="button" data-dismiss="modal" class="btn btn-sm btn-space btn-secondary">Cancel</button>
                <button type="button" data-dismiss="modal" class="btn btn-sm btn-space btn-danger">Proceed</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<!-- Call model in javascri ==  $("#sendClick").click(); -->

$(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();
        });
    }

$("#my-modal").modal("show");
$("#my-modal").modal("hide");