marcelodolza / izimodal

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

Front-end Specialist, Vue and React Developer.

izimodal's Issues

Created a Rails gem to import the izimodal assets onto Rails projects

I really loved the modal's user experience across the devices. As i wanted to use izimodal Jquery assets in my personal rails projects, I created a Rails gem which can be imported to any rails application. For further details look into below project. Suggestions are welcome. I will be actively maintaining the app to update the assets whenever they change.

https://github.com/elitenomad/izimodal

"Opened" event not working when a transition is defined.

Making some tests with events, I noticed that the "Opened" event not working when a transition is defined. Looking at the code I can see that you applied the "animation Event" to the "wrap" element, not on "modal" element:

that.$element.find('.'+PLUGIN_NAME+'-wrap').one(animationEvent, function () {

I tried:

that.$element.one(animationEvent, function () {

Works good until by now.
What do you think?

Thank you for this awesome plugin.

Greetings from Minas Gerais.

Refresh with event target

Hey again,

I have one problem when using iframe. The modal is open and I do a refresh on page, but this call a alert saying:
"failed to find iframe URL"

Cannot read property 'options' of undefined(…)

When a url has a hash is not a modal id the console print this error

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;}

Failed to find URL (sem iframeURL)

Se eu removo o parametro iframeURL do JS ele não pega o href... Também preciso fazer eles em grupo.
Estou fazendo errado? Abaixo meu pen teste

Pen: http://codepen.io/johanguse/pen/yVxOKd

RTL Support

fluid youtube embed

Hi, is it somehow possible to make a modal with a youtube embed fluid?
Right now i have the modal have width: 70%
but the iframeHeight is always fixed.

Is there any workaround or trick to have the height relative to the modal width?

thanks a lot :)

npm install -> merge conflicts in css

Hy, when I install version 1.4.* via npm I still get the css file with the merge conflicts in it, think you have to publish the new fix?

disable close button on header

How can I disable/hide close button auto generated by iziModal-header, modal need to hold on before the request end

Cannot scroll page when modal is open in mobile

When opening 'Alert Like' modal, it's not possible to scroll in the page. It's understandable when using big modals, you want to scroll the modal, but when using small ones, the scroll should be on the page. Not sure if it happens in all browser and devices, but here follows my specifications:

Device: Sony Xperia E3
Android: 4.4.4
Browser: Opera 37.0.2192

Fullscreen and close buttons retina issue

I just came across your plugin and noticed that fullscreen and close button are not retina ready. Best regards.

close the modal using the back button on mobile

Clear hash

Please make clean hash after closing

hash

When you load the page with any hash, for example #test.
An error occurs:
Uncaught TypeError: Cannot read property 'iziModal' of undefined

  i.off("hashchange load").on("hashchange load", function(e) {
    var i = document.location.hash;
    if (0 === l)
      if ("" !== i) {
        t.each(t("." + o), function(e, n) {
          var o = t(n).iziModal("getState");
          "opened" != o && "opening" != o || "#" + t(n).attr("id") !== i && t(n).iziModal("close")
        });
        var n = t(i).data();
        "load" === e.type ? n.iziModal.options.autoOpen !== !1 && t(i).iziModal("open") : setTimeout(function() {
          t(i).iziModal("open")
        }, 200)
      } else
        t.each(t("." + o), function(e, i) {
          var n = t(i).iziModal("getState");
          "opened" != n && "opening" != n || t(i).iziModal("close")
        });
    else
      l = 0
  }),

The error in this line:

"load" === e.type ? n.iziModal.options.autoOpen !== !1 && t(i).iziModal("open") : setTimeout(function() {
          t(i).iziModal("open")
        }, 200)

The error is triggered even if iziModal not declared

Wrong bower

Bower file need to point to the needed files for automations tasks, so the needed files will be included automatically PR #39

Support multi windows in future?)

Cool plugin

Add support for class+text icons like Google Material Icons

Just simple another option:

if (options.iconText !== null){
this.$header.find('.'+PLUGIN_NAME+'-header-icon').html( options.iconText);
}

https://design.google.com/icons/

Internet Explorer 11

I have experiencing problems on internet explorer 11, modal is not opening...

        $("#modal-custom").iziModal({
                overlayClose: false,
                closeOnEscape: false,               
                width: 600,
                autoOpen: true
        });

In firefox and google chrome is opening

Can you help me?

Change iframe URL on the fly

I'm using the iframe option and displaying a page.

On completion of a task in that page, I have a message come up with an option to go to a different page.

Without having to close and reopen iziModal, can I change the iframe URL and make izimodal reload to the page?

overlayClose

Primeiramente, parabéns pelo plugin, com certeza irei utiliza-lo.

"Segundamente", estava testando as funcionalidades no site oficial e percebi que a função overlayClose só funciona da primeira vez que a modal é aberta, uma vez fechada, tanto pelo botão "X" quanto clicando ao fundo, quando a modal for aberta novamente o único modo fecha-la é clicando no botão "X".

Testes efetuados no Chromium e Firefox

Width/Height Calculation Problem

Hi, since the 1.4.2, I'm having an issue where the modal is flush on the bottom right on first open but is correctly centered on and after second open. I've tried with different content, and the result is the same. Before the update, the content was horizontally centered correctly but the height was 100% regardless of content size. Now, the height/width is being calculated correctly, but not centered correctly.

Also, a suggestion: if there was a parameter to set height as well as width, that would be useful (especially with this issue present). Thanks.

Support multi windows in future?)

Cool plugin, only thing missing is the support of multiple windows, to replace jquery dialog^ ^

Trigger modal close inside iframe

Hopefully can get this to work.
I use iziModal to display a survey that is on a different server. When the survey is complete it comes back to original server and displays a thank you message, but still within the iframe.
In this thank you message I'd like to be able to present a button for the user to click to close the modal.
I've added data-izimodal-close to a button (shown in the thank you message), but it is not getting picked up by izimodal.

angular 2 events not firing inside template

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

"Icon element" is added even when not defined

What do you think about inserting the "header-icon" element only when it's defined?
Maybe changing:

From:
if (options.icon !== null){

To:
if (options.icon !== null && options.icon !== ""){

If the icon element is always inserted, but it is empty, the element causes a space problem:

Thanks.

`timeout` option for an auto close alert like modal?

Thanks for the great work!
And is there a timeout option for an auto close alert like modal?
Sometimes, I just want to display a message and close after a while.
setTimeout works but not quite elegant, IMO.

What support for browsers?

What browsers are supported?
I did not find this information.

@2x icons

First of all, congratulations for this nice modal 😃 This is just a suggestion. Would be great to have @2x ready icons. In the iframe and alert examples the close icon doesn't look good on a retina display (MacBook Pro with retina display and iPhone 6).

Thanks for sharing!

Modal class on close

If the original modal container had a class when initialized, it will loose this class once the modal went through an open-close cycle and will be replaced with the iziModal class.

Original:

<div id="modal-1" class="customClass">
  <!-- original content -->
</div>

New:

<div id="modal-1" class="iziModal" style="...">
  <!-- extended content -->
</div>

Preferred solution:

<div id="modal-1" class="customClass iziModal" style="...">
  <!-- extended content -->
</div>

Change the bower.json

"jquery": "2" -> "jquery": "~2"

Gallery support

Hello,

Great job with plugin. Simple and elegant.

It will be great to see gallery support in next version - navigation arrows between another modal's. Maybe on rel="gallery" attr in link?

Greetings, W

Opening multiple modal Windows in firefox

There was a problem with scroll lock.
The window starts to twitch.

Example

<a href="https://github.com/dolce/iziModal" class="trigger">Modal</a>
<div id="modal" class="hide">
    1
    <a href="https://github.com/dolce/iziModal" class="trigger2">Modal</a>
</div>
<div id="modal2" class="hide">
   2
    <a href="https://github.com/dolce/iziModal" class="trigger3">Modal</a>
</div>
<div id="modal3" class="hide">
  3
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#modal").iziModal();
  $(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); 
  });
  $("#modal2").iziModal();
  $(document).on('click', '.trigger2', function (event) {
    event.preventDefault();
    $('#modal2').iziModal('open', this);
  });
  $("#modal3").iziModal();
  $(document).on('click', '.trigger3', function (event) {
    event.preventDefault();
    $('#modal3').iziModal('open', this); 
  });
});

The ability to open multiple Windows significantly influenced the choice of this plugin.

progressBar on last instance run on all instances

$('#app-modal').iziModal({"history":false,"group":"custom","timeout":false,"pauseOnHover":true,"attached":null,"icon":"info","title":"Info"});
app.modal.init('app-modal',{});

$('#app-msg').iziModal({"history":false,"group":"info", "timeout":3000,"pauseOnHover":true,"attached":"top","icon":"info","title":"Message"});

npm & bower

Boas Marcelo,

esta biblioteca é top, quando é que pensas em publicar isto no npm e no bower?

Cumprimentos de Portugal,

Renato Duarte.

Demo Page

Can you create a demo page listing all possible examples separately? I am having trouble making it work
Edit: nvm Got it working. Yay!

Media query generation

I'm running into an issue when generating media queries that keeps the modal at 100% on the screen.

When I debug the codepen: http://codepen.io/tofanelli/pen/mEjBJG

I can see that the media query sets max-width: to 600px so that it matches the width of the modal.

On my site, I get an error due to the calculation of that.$element.outerWidth(), it never ends up being the width that I set in the options, so the media query is never applied.

Wouldn't a better solution to set the media query width to the same value passed into the options?

I can make a PR for a fix, but I'm unsure if there is some logic involved that I might be missing.

Two iziModal bug on close

Hey,

I having a problem here with two iziModal opened. One is just a modal with form, but the second is a alert modal with timeout. So, whats happens is when the alert timeout reach to zero and close, the first modal with form is close too.

In the url you can see whats happen:

1. url#modalForm - when modal form open.
2. url#modalTimeout- when alert open.
3. url# - when alert close by timeout, closing the modalForm together.

examples

Not working in chrome
http://codepen.io/tofanelli/pen/WxKEgP

add SASS style

How to stop opening the modal window after click?

Is there any way to stop opening of the modal window based on the onOpening function?

can't use width unit

$("#modal").iziModal({overlayColor: 'rgba(0, 0, 0, 0.6)',width: '100%'});

output initialize css of $("#modal") is
width="100px"

Accessibility?

Does it support WAI AA accessibility?

iframeURL optional (by event like click) not working with append childs

Hey,

I got a problem when using font awesome (not because the library). I made this code:

<a href="site.com" class="btn btn-primary">
    <i class="fa fa-pencil">
</a>
<div id="modal">
<script>
$("#modal").iziModal({
        iframe: true,
        iframeHeight: $( window ).height()-200,
});
$("a").click(function(e){
        $("#modal").iziModal("open",e);
});
</script>

When modal open, the iframe not getting src attribute in some times, other it's normal. It's occur because the pointer click inside the 'i' element or outer, clicking only in 'a' atrribute. In iziModal.js line 303 you getting only href = param.target.href;, but target is 'i' element, not 'a'. When I click on 'i', the 'a' element is reffering by currentTarget.

My provisory solution:
e.target = e.currentTarget

Opening Animating glitching after a few opens

Hi all!

I just started using iziModal(amazing), but i'm having issues with the open animation. After a few clicks it gets glitched and the modal opens larger and then abruptly resizes smaller.

Here is a gif of it in action, the slide is the intended animation:

my js:

$("#modal").iziModal({
    overlayClose: true,
    width: 600,
    overlayColor: 'rgba(0, 0, 0, 0.6)',
    transitionIn: 'bounceInDown',
    onOpened: function() {
        //console.log('onOpened');
    },
    onClosed: function() {
        //console.log('onClosed');  
    }
	});
	$(document).on('click', '#trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open');
});

My modal html

<div id="modal">
<section class="container" id="email">
<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="John Doe" id="nameField">
    <label for="emailField">Email</label>
    <input type="text" placeholder="[email protected]" id="emailField">
    <label for="commentField">Message</label>
    <textarea placeholder="Hi CJ …" id="commentField"></textarea>
    <div class="float-right">
      <input type="checkbox" id="confirmField">
      <label class="label-inline" for="confirmField">Send a copy to yourself</label>
    </div>
    <input class="button-primary" type="submit" value="Send">
  </fieldset>
</form>
</section>
</div>

If anyone could help me resolve this, I would be ecstatic.

Thanks!

please, fix the merge at line 106

<<<<<<< HEAD

            if (options.rtl === true) {

            if (options.rtl) {

origin/master

Iframe Scroll Not working

Hello,

I am using iframe in Modal. Unfortunately scrolling not working on iphone. Can you please help me?

GIT error from last merge

Hi, you commited an conflict merge in last version
221720a

<<<<<<< HEAD
      /* RTL */

 +=======
 +>>>>>>> origin/master

jquery after ajax call not working in modal

Modal in I have defined
functions, ajax form not working ! izimodal ajax get load in modal ,not working jquery function vb.