samdark / the-modal Goto Github PK

Hi there!
A am using Ryan Faith's Css sticky footer markup, and in this case the-modal doesn't work properly. It scrolls current page to top.
When I'm switching off html and body css 'height' property, everything became fine.

To example:

$('#test-modal').modal({cloning: true}).open();

On first open work's normally, on next opens - open only overlay.

This is due to the fact that the modal is inserted into overlay element(appendTo), and close function removes overlay.

Perhaps related with #39.

Can you add a license file please. Hard to use this without permisson :)

G Chrome 20.0.1132.57 m

What is the purpose of the style="left: -15px;"? Seems to just move the modal off the page.

1st case : cloning option works, but onclose dont work :

$elm.modal({

           cloning : false, // this will work everytime
           onClose: function(){
                alert("this will never happen");
            }

        }).open({

        });

2d case : both are working

$elm.modal({

           cloning:false

        }).open({
            onClose: function(){
                alert("this will happen when closed");
            }
        });

Dont know if it is a bug or if the doc is wrong. But doc says the options are working with constructor.

                $('#modal-window').modal({ 
                    lockClass: 'modal-lock',
                    overlayClass: 'modal-overlay',
                    closeOnEsc: false,
                    closeOnOverlayClick: false,    
                    onBeforeClose: null,
                    onClose: null, 
                    onOpen: function(el, options){
                        $.get('http://'+siteroot+modalPath+modalContent+'.php', function(data){
                            el.html(data);  
                        }); 
                    },
                    cloning: true
                }).open();

I'm using this. But when it openes the php file it just dumps the content in "modal-overlay" div.
Am i missing something here?

Если основная часть страницы позиционируется, например, по центру и контента столько, что видел скролбар, то при показе модального окна без скрола, основной сролбар исчезает и из-за этого весь контент визуально прыгает (из-за исчезнувшего срола у body).

Нужно компенсировать отступ при исчезновении скролбара у body.

If content of the modal is clicked once, it works fine.

The list of config is not documented. It would be more than convenient

I spent 30min to browse your sources to figure out why my code didnt work. If i knew that the option cloning exist then it would have saved me this time.

It would be great to get next release tag in 0.1.x branch for current version of the script because it contains some important fixes, but they're not available through Bower since it takes only releases in mind.

When I have a 'right to left' page (direction:rtl) the scrollbar inside 'themodal-overlay' is hidden (because of the -17px fix).
In order to fix this I added 'direction:ltr' to the .themodal-overlay css class, and then returned the inner content to the correct rtl by doing 'direction:rtl' to the .modal css class.

This is not a bug, just a "thank you" message. Looks and works really great. Much better then jQuery UI Dialog.

Thanks again.

Renamed it to kf(kittyfucker or kentuckyfried or whatevah) modal.
It conflicted with bootstrap.

/**
 * The Modal jQuery plugin
 *
 * @author Alexander Makarov <[email protected]>
 * @link https://github.com/samdark/the-modal
 * @version 1.0
 */

/*global jQuery, window, document*/
;(function($, window, document, undefined) {
    "use strict";
    /*jshint smarttabs:true*/

    var pluginNamespace = 'the-modal',
        // global defaults
        defaults = {
            overlayClass: 'themodal-overlay',

            closeOnEsc: true,
            closeOnOverlayClick: true,

            onClose: null,
            onOpen: null
        };

    function lockContainer() {
        $('html,body').addClass('lock');
    }

    function unlockContainer() {
        $('html,body').removeClass('lock');
    }

    function init(els, options) {
        var modalOptions = options;

        if(els.length) {
            els.each(function(){
                $(this).data(pluginNamespace+'.options', modalOptions);
            });
        }
        else {
            $.extend(defaults, modalOptions);
        }

        return {
            open: function(options) {
                var el = els.get(0);
                var localOptions = $.extend({}, defaults, $(el).data(pluginNamespace+'.options'), options);

                // close modal if opened
                if($('.'+localOptions.overlayClass).length) {
                    $.kfModal().close();
                }

                lockContainer();

                var overlay = $('<div/>').addClass(localOptions.overlayClass).prependTo('body');
                overlay.data(pluginNamespace+'.options', options);

                if(el) {
                    el = $(el).clone(true).appendTo(overlay).show();
                }

                if(localOptions.closeOnEsc) {
                    $(document).bind('keyup.'+pluginNamespace, function(e){
                        if(e.keyCode === 27) {
                            $.kfModal().close();
                        }
                    });
                }

                if(localOptions.closeOnOverlayClick) {
                    overlay.children().on('click.' + pluginNamespace, function(e){
                        e.stopPropagation();
                    });
                    $('.' + localOptions.overlayClass).on('click.' + pluginNamespace, function(e){
                        $.kfModal().close();
                    });
                }

                $(document).bind('touchmove.'+pluginNamespace,function(e){
                    if(!$(e).parents('.' + localOptions.overlayClass)) {
                        e.preventDefault();
                    }
                });

                if(localOptions.onOpen) {
                    localOptions.onOpen(overlay, localOptions);
                }

                el.on('resize', function (){
                    el.css('marginLeft', ($(window).width() - el.outerWidth())/2);
                }).triggerHandler('resize');
            },
            close: function() {
                var el = els.get(0);

                var localOptions = $.extend({}, defaults, options);
                var overlay = $('.' + localOptions.overlayClass);
                $.extend(localOptions, overlay.data(pluginNamespace+'.options'));

                if(localOptions.onClose) {
                    localOptions.onClose(overlay, localOptions);
                }

                overlay.remove();
                unlockContainer();

                if(localOptions.closeOnEsc) {
                    $(document).unbind('keyup.'+pluginNamespace);
                }
            }
        };
    }

    $.kfModal = function(options){
        return init($(), options);
    };

    $.fn.kfModal = function(options) {
        return init(this, options);
    };


    $.kfModal.getAvailableWidth = function (width){
        return  Math.min($(window).width() - 100, width);
    };

    $.kfModal.getAvailableHeight = function (height){
        return  Math.min($(window).height() - 100, height);
    };

})(jQuery, window, document);

Hi @samdark,

Would it be possible to publish the-modal on npm as well as on bower (npmjs.com/package/the-modal is free!)?
We're currently using it in our project, and we'd like to switch to only using npm for dependency management.

Thanks in advance! :)

Нехватает z-index для .shim, из за чего срабатывает :hover и другие стили
вот пример http://mc-bear.info/p/redactor/examples/modal.html

не работает код.

<script type="text/javascript">
    $('.thumbnail > a').click(function(){
        $.modal().open({
            onOpen: function(el, options){
                el.html('Hello!');
            }
        });
        return false;
    })
</script>

на вот таком HTML

<div class="thumbnail">
          <a href="image.png">
                 <img src="thumb.png">
          </a>
</div>

return false нету, модального окна нет и выпадает ошибка

Uncaught exception: TypeError: 'a.cloneNode' is not a function
Error thrown at line 4, column 7138 in (a, b, c) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    var d,e,g,h=f.support.html5Clone||f.isXMLDoc(a)||!bc.test("<"+a.nodeName+">")?a.cloneNode(!0):bo(a);
called from line 4, column 1631 in () in http://yandex.st/jquery/1.7.2/jquery.min.js:
    return f.clone(this,a,b)
called via Function.prototype.call() from line 2, column 17338 in (b, c) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    return a.call(b,c,b)
called from line 2, column 25218 in (a, c, d) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    f=c(a[i],i,d),f!=&&(h[h.length]=f);
called from line 2, column 17246 in (a) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))
called from line 4, column 1545 in (a, b) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    return this.map(function(){return f.clone(this,a,b)})
called from line 58, column 5 in (options) in http://localhost:8000/static/script/jquery.the-modal/jquery.the-modal.js:
    var cln = $(el).clone(true).appendTo(modal).show();
called from line 126, column 8 in () in http://localhost:8000/info/gh/:
    $.modal().open({
called via Function.prototype.apply() from line 3, column 8566 in (c) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    c.data=s.data,c.handleObj=s,o=((f.event.special[s.origType]||{}).handle||s.handler).apply(q.elem,g),o!==b&&(c.result=o,o===!1&&(c.preventDefault(),c.stopPropagation()))
called via Function.prototype.apply() from line 3, column 1244 in (a) in http://yandex.st/jquery/1.7.2/jquery.min.js:
    return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b

если код вынести из .click() то появляется только ширма

Can't reproduce this problem, but on some PC under Windows 7 in the webkit based browsers this property caused overlay strange behavior: sometimes it can fully or partially dissapear https://dl.dropbox.com/u/495551/DBUpload/Clipboard02.png

If this property is realy needed for iPad, needs more accurate iPad detection.

Windows 7, x64, chrome 20.

in ie9 not working modal().close()

in ie8 not working open and close...

Здравствуйте. Очень понравился ваш плагин, легкий, быстрый и удобный.
Однако, если я хочу очень много товаров в модальных окнах, мне надо каждое окно инициализировать в JS, это очень не удобно.

<!-- Button trigger modal -->
<button data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      modal body
    </div>
  </div>
</div>

If 'clone' is set to false, we need to hide the modal element after its closed (and appended to the end of the document) otherwise it will be shown.

I fixed it by adding .hide() to the end of line 221:
$(el).appendTo($(el).data(pluginNamespace+'.parent')).hide();

Here is a bug: https://github.com/samdark/the-modal/blob/master/jquery.the-modal.js#L74 . This block of code stops bubbling of click event, so if we define hendler like $("body").on("click", ".some_class", doAwesomeActions), "awesome actions" won't be done.
Solution is cheching class of event target instead of stopping propagation. Like this:

if(localOptions.closeOnOverlayClick) {
    $('.' + localOptions.overlayClass).on('click.' + pluginNamespace, function(e){
        if (e.target.className == localOptions.overlayClass){
            $.modal().close();
        }
    });
}

Пример кода:

$('body').on('click', '.trigger', function(e){
    e.preventDefault();
    
    $('#test-modal').modal().open({
        onOpen: function(el, options){
            el.html('Hello!');
        }
});

el в данном случае является ссылкой на исходный объект, а не на копию, которая отображается в модальном окне и подгружать контент через ajax таким образом не получается.

I want to be able to open the modal vertically centered in the middle of the page.
Setting a fixed top margin in the css (margin:20px auto) seems a bit restrictive.
Thanks