Elegant, responsive, flexible and lightweight modal plugin with jQuery.

  • By Marcelo Dolza
  • Last update: Sep 4, 2022
  • Comments: 16

iziModal

CDNJS

Elegant, responsive, flexible and lightweight modal plugin with jQuery.

izimodal.marcelodolza.com

capa

Fast Responsive Animated Lightweight Customizable History Group Mode Retina
alt text alt text alt text alt text alt text alt text alt text alt text
  • All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE9+ and Edge).
  • Bugs? create an issue here.


CDNJS

https://cdnjs.com/libraries/izimodal

npm

npm install izimodal --save

bower

bower install izimodal --save

GEM

gem install izimodal

Donations

If you liked this plugin, you can donate to support it:

Github

https://github.com/marcelodolza/iziModal

Comments(16)

  • 1

    Js error on 1.5.0

    Hey,

    Look this error, it happen at any time when change window and back

    iziModal.js:1195 Uncaught TypeError: Cannot read property 'split' of undefined at jQuery.fn.init.$.fn.(anonymous function) [as iziModal] (http://gsa.localhost/assets/scripts/frontend.js:53257:24) at HTMLDocument. (http://gsa.localhost/assets/scripts/frontend.js:53233:26) at HTMLDocument.dispatch (http://gsa.localhost/assets/scripts/frontend.js:5206:27) at HTMLDocument.elemData.handle (http://gsa.localhost/assets/scripts/frontend.js:5014:28)

  • 2

    Modal behind overlay when using custom "appendTo"!

    When i use a custom 'appendTo', like this: $("#modal").iziModal({ title: 'Test', headerColor: '#88A0B9', appendTo: '#content', icon: 'fa fa-user' });

    The overlay will still append to the 'body' which puts it in front of the modal. How can i fix this?

  • 3

    Is it possible to you provide a iziModal.confirm function?

    Hi @dolce , I know I can make a custom modal with some buttons (Yes,No,OK,Cancel &...) to make a confirm modal by iziModal plugin but I ask is it possible to you provide a special iziModal.confirm function?

    Just likeiziToast.info,iziToast.warning and ... that you made for your iziToastplugin but with some ability to handle click events on the defined buttons.

    I have seen this feature in some other modal plugins like bootbox. Thank you in advance...

  • 4

    ScrollHeight

    Após atualizar da V 1.20 para a 1.30 eu obtive o seguinte erro, porém efetuei o downgrade para a 1.20 e continuei a usar, normalmente. Notei que a versão 1.31 havia sido lançada, fiz o update e o erro permanece, novamente efetuei o downgrade para continuar com o projeto sem interrupção.

    Error:

    $Arquivo.js: 63 Uncaught TypeError: Cannot read property 'scrollHeight' of undefined

    • https://github.com/dolce/iziModal/blob/master/js/iziModal.js

    Identifiquei que no arquivo acima, a única vez em que scrollHeight aparece é na linha 777 do arquivo em JavaScript:

     contentHeight = this.$element.find('.'+PLUGIN_NAME+'-content')[0].scrollHeight,
    

    Sou leigo em JS para mexer livremente no código, essas foram as informações que consegui obter, por favor dê uma verificada.

    Abraço, Daniel Barion

  • 5

    Izimodal opens and closes immediately

    I used izimodal on several occasions and it often happens that if I launch the "open" method right after izimodal initialization, modal opens and immediately autocloses.

    es:

    $('#element').iziModal({
    options...
    });
    
    $(#element).iziModal('open');
    
    

    I know the "autoopen" option exists to prevent this from happening but it is not the case that you often use it, since sometimes there are some occurrences or controls that need the ".izimodal ('open') method between somes check ("if", controls that set the "open" or not .. ). I did a little check on the logic of the script and I noticed that Izimodal is doing a "close" method in the init that apparently contrasts with what was said above.

    Has anyone encountered the same problem?

  • 6

    I can't use iziModal with webpack

    When I try to load iziModal like a module with require('izimodal') I got an error:

    $(...).iziModal is not a function

    I'm using izimodal 1.5.1 and jquery 3. Also I'm loading jquery with webpack ProvidePlugin

            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            })
    

    Any help? Cheers

  • 7

    Conflict between iziToast and iziModal

    I used both iziToast and iziModal in a project but I think there are some conflict between them.

    For example:

    If I put iziToast.css below the iziModal.css it cause negative side effects on the animation of the background overlay of the opened modal [when i want close the modal].

    and

    If i put iziModal.css below the iziToast.css it cause negative side effects on opend notification (the title of notification is hide)!

    You can see side effect of iziModalon title of iziToast in the bellow image (100% key-frame has zero opacity then it hide the title of toast notification):

    image

    Is there a patch for these conflicts? Or should I use these tools with some special order and configs in this cases?

    In addition: Hey @dolce , I think your plugins are awesome! Bravo!

  • 8

    Closing on press enter/return

    Olá!

    Ao recriar o formulário de exemplo de login/registro, ao pressionar ENTER (Return no iOS), ao invés de submitar o formulário, está fechando o modal.

    Exemplo: https://codepen.io/maykelesser/pen/YVJGzb

    JS:

    $("#modal-registro").iziModal({
            overlayClose: false,
            width: 600,
            overlayColor: 'rgba(21,67,130,0.95)',
            transitionIn: 'bounceInDown',
            transitionOut: 'bounceOutDown'
        });
        $("#modal-registro").on('click', 'header a', function(event) {
            event.preventDefault();
            var index = $(this).index();
            $(this).addClass('active').siblings('a').removeClass('active');
            $(this).parents("div").find("section").eq(index).removeClass('hide').siblings('section').addClass('hide');
    
            if( $(this).index() === 0 ){
                $("#modal-registro .iziModal-content .icon-close").css('background', '#ddd');
            } else {
                $("#modal-registro .iziModal-content .icon-close").attr('style', '');
            }
        });
    

    HTML:

    <div id="modal-registro">
    	    <button data-iziModal-close class="icon-close"><i class="fa fa-close"></i></button>
            <header>
                <a href="" class="active" id="signin">Login</a>
                <a href="">Novo registro</a>
            </header>
            <section>
            	<form action="/login" method="POST" class="validar">
    	            <input type="text" class="validate[required,custom[email]]" name="txEmail" placeholder="E-mail">
    	            <input type="password" class="validate[required]" name="pwSenha" placeholder="Senha">
    	            <footer>
    	                <button data-iziModal-close>Cancelar</button>
    	                <button class="submit">Acessar</button>
    	            </footer>
               	</form>
            </section>
            <section class="hide">
            	<form action="/registro" method="POST" class="validar">
    	        	<input type="text" class="validate[required]" name="txNome" placeholder="Nome">
    	            <input type="text" class="validate[required,custom[email]]" name="txEmail" placeholder="E-mail">
    	            <input type="password" class="validate[required]" name="pwSenha" placeholder="Password">
    	            <footer>
    	                <button data-iziModal-close data-iziModal-transitionOut="bounceOutDown">Cancelar</button>
    	                <button class="submit">Criar conta</button>
    	            </footer>
    	        </form>
            </section>
    	</div>
    
  • 9

    Is it AMD compatible ?

    I try a lot to use it my recent project module and also try to convert the plugin to AMD format!! Unfortunately, the plugin is showing undefined and not working :( ++

  • 10

    Scroll on mobile

    Should add a class/style to the body that makes it so when the modal is open only the modal can scroll and not the page. This causes it to have to resize when you scroll on Android and probably iOS when the browser hides or shows the URL bar.

    Should be a simple as adding a no-scroll class to the body and .no-scroll{overflow:hidden;}

  • 11

    Modal closes on page scroll

    I'm trying to integrate iziModal with fullpage.js, but when the page resizes it moves slightly and this causes the iziModal to close out. Is there any way to stop the modal from closing when the original page scrolls?

  • 12

    Are the iziModal demos on codepen broken?

    I'm wanting to experiment with getting iziModal options working. (so far, options I pass into an iziModal invocation appear to be ignored).

    I jumped to the demos in codepen. None of them seem to be functioning in either Chrome or Firefox on Ubuntu.

    For example:

    https://codepen.io/tofanelli/pen/WxKEgP

    Clicking the buttons makes the buttons flare, but the state within the demo pane doesn't change.

    I get this error in the browser console.

    Uncaught TypeError: $(...).iziModal is not a function
        <anonymous> https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-08825428-d665-a1aa-d0b5-a7f7039c56c4:8
    
  • 13

    URL in top of the file has a typo/goes to possible hacked site

    http://izimodal.marcelodolce.com

    ^ this is the URL in the commented out, top of the file portion of the

    iziModal.js

    and

    iziModal.min.js

    files - this URL prompts to install a browser extension...

    vs. your actual domain:

    https://izimodal.marcelodolza.com/

  • 14

    data-iziModal-autoOpen opens wrong modal

    I've two iziModals on a HTML-page - one has the data-iziModal-autoOpen attribute set.

    Works fine, if the "autoOpen-Modal" is placed as last after the other modals in the code. But if i reverse this order, the other modal is auto opened, although it has not this attribute.

    It seems, that always the last modal in order is opened, if one modal has the attribute data-iziModal-autoOpen. I've tried this issue also with three modals (one with auto open attribute) - same result...

  • 15

    After appendTo switch arrows are being removed.

    When I add appendTo property to the config file I can't see switch arrow buttons anymore. Actually they are being hidden under the iframe modal.

    image

    After adding append to:

    image

  • 16

    Iframe data attr no longer seems to be working

    I have used data-izimodal-iframeurl successfully in the past utilizing what is exactly in the documentation, ie: <button data-izimodal-iframeurl="http://..." data-izimodal-open="#modal-iframe">Modal</button>

    However, I came back to a test page today and it does not seem to be functioning at all. I am using the newest version and I dont see a reference to the data attribute at all in the source code for 1.6.0. Is this still a viable means of use?