robinparisi / tingle Goto Github PK

J'ai découvert tingle depuis peu et je l'utilise intensivement, c'est une bonne lib.
Cependant, je rencontre un problème lorsque tingle ne semble pas pouvoir s'initialiser plusieurs fois. En effet, quand un module A init tingle et qu'un module B l'init aussi, la popup ne s'ouvre plus.

Pourriez vous corriger ce problème rapidement,
Cordialement

Feature request: Escape button (ESC) to close

The form tag disappear when pop up shows.

its opening and closing dont show up in browser.

To use the modal for getting user input / as an alert, it would be helpful if the modal did not close when the user clicks outside of it.

Tried with iOS 10.2

Though close button looks fine on iPad.

The tingle.gif example file is taking up more than 3MB. I'm using tingle in an app, with automated distribution, would be best if this file was not in there, but not sure how to go about that. Easiest would be to have it removed from the project ;-) If you would consider it , thanks!

The footer slides from the top of the screen instead of the bottom.
But it's a great module. Thank you, I use it on all my websites.

Hi,

Could you add an ajax call functionality? Like what fancybox has, when you set a class to an tag it will open a pop-up box and get the content from its href target. Thanks :)

Are you interested in adding a Sass version to allow quick styling through vars? I can send a pull request, obviously if you're interested.

Here is the code :

var modal = new tingle.modal({
      onOpen:function () {
        console.log('onOpen callback is called');
      }
    });

When you close and reopen the modal several times

modal.open();
modal.close();
modal.open();
modal.close();
modal.open();
modal.close();
modal.open();

You can see that the onOpen callback is called too many times.

When I look at the code (line 94)
https://github.com/robinparisi/tingle/blob/master/src/tingle.js#L94
there is an addEventListener which is attached to the modal every time the onOpen callback is called.
I think this is the origin of the issue.

Thanks for this wonderful library.

How would I add a small animation, so the modal closes softly, as it does when it opens? I find it slightly inharmonious as of now.

Many thanks in advance.

it's not issue, just message for you! sweetalert and other plugins very high, and i find yours, big thanks!

is it possible to not allow the modal to be closed (hide the close button, don't allow clicking on bg, etc).

PS: Nice lib!

Looking to get tingle.js modal to appear in the parent from calls within an iframe. If not possible in the existing code, can you direct on how code can be altered?

Flexbox for centering modals would be excellent and would do away for the need to centering api. Its relatively easy to switch to flexbox plus support has been around for years.

http://caniuse.com/#feat=flexbox

On pc browsers, I must click button open and close the modal, then open it again the big modal can be scrolled.
Ps: I created the html content in js file, not in html file and set the display attribute.
Like this:
var newDiv = "<p>Hello Word</p>..."; modalBigContent.open(); modalBigContent.setContent(newDiv );

Example:

var confirm = new tingle.confirm({
  content: "Here's some content",
  onConfirm: function(){
    // on confirm process
  },
  onCancel: function(){
    // on cancel process
  }
});

Consider using the same approache for alerts.

Hi

I want to get a confirmation when someone wants to close the modal. This confirmation is itself another modal! But when I summon the other modal it goes behind the original one!
is there any work around?

Thnx

I do some of my own css styling for the footer position, not sure why width and left position are changed on resize of the window. (stickyFooter is not set to true, but I see in the resize method you do call the _recalculateFooterPosition method, not sure why.)

Allow for the modal to wrap around contents width and height, or to allow setting of these options within js api.

Can we have a public method that will destroy a modal if indeed there is one present? Use case if if I don't have the variable reference any more. (for example by programatically wanting to show another modal)

Bonjour @robinparisi ,

Tout d’abords , merci pour ce plugin qui me sert chaque jour =)

J'aimerais savoir : peut-on ajouter des instructions supplémentaires lors de la fermeture d'une modal ?
Que ce soit une fermeture dynamique avec tingle.modal.close() où bien lors d'un clic hors de la modal ?
Et pourquoi pas la possibilité d'avoir d'autre events comme 'open' ?

Cordialement

First off, thanks for this great script.

It would be nice if the modal closed upon clicking the back button on a mobile device.

This is something that's always bugged me about modals (probably more of a nag on Android devices). When I first took a look at your demo, then opened the modal, I reflexively clicked the back button to close it and ended up leaving your site. Yes, I see the close button. Yes, I've dealt with modals a million times, but on a mobile device automatic reflexes kick in and it's unavoidable. I doubt the regular website visitor handles this much different.

I've seen a few rare number of modal scripts tackle this, typically by having to juggle the browser's back and forward history. I found your script from vanillalist and none of the eight pure javascript modals they have listed implement this.

Some discussion on this topic:
http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html
http://ux.stackexchange.com/questions/53163/good-idea-to-have-back-button-close-a-modal-window
https://gist.github.com/thedamon/9276193
https://forum.ionicframework.com/t/closing-modal-with-android-back-button/3207/20

Thanks.

Hi there,

the full-screen (big) content has an issue with the scroller on iOS, both on Chrome and Safari: when the content is too big and needs to be displayed with a scrollbar, any scrolling attempts scroll the blurred background page, not the modal content. I'll try to fix it myself as well, will post update if I do.

Could I do a PR to update transitionEvent for onClose as an option?

If I want to destroy the modal after a user closes it, the action happens immediately, lemme know if that's something I can work on 😄

Is it possible to trigger a modal from a non-button? I'd like to have the same modal accessible from a couple of different text links on a page.

I'd like to put the close button inside the modal window box, that way I can position it with CSS relative to the box.

When the 'X' button is pressed, the modal window is closed but the sound is playing, and the video being played seems to be alive in the background.
I hope that everything related to video is stopped at close time.

Thank you. A good day today

Ex.))

<iframe width="854" height="480" src="https://youtu.be/XL9Ri8pO68w" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript"> /** * Modal Tiny no footer */ var modalTinyNoFooter = new tingle.modal({ onClose: function() { console.log('close'); }, onOpen: function() { console.log('open'); }, beforeClose: function() { console.log('before close'); return true; }, cssClass: ['class1', 'class2'] }); var btn = document.querySelector('.js-tingle-modal-1'); btn.addEventListener('click', function(){ modalTinyNoFooter.open(); }); modalTinyNoFooter.setContent(document.querySelector('.tingle-demo-tiny').innerHTML); </script>

I would like to add lazy loading to images inside the modal, and adding the data-src attribute wont work, the images simply don't show with this attribute.

Because the closing is slightly asynchronous, if you reopen the modal window too quickly, it can open and then instantly close as the previous asynchronous close event is fired.

Hey ... I created a basic HTML file
include the CSS file and the dist file "tingle.min.js"
and things happens...
i get a "f is null" error on the console log

Not sure if this was intended to not close this DIV—figured I would submit an issue just in case.

https://github.com/robinparisi/tingle/blob/master/doc/index.html#L29

Tingle under per say 400px width will by default have a close button above the modal and it's really nice because I don't want to add a close button within the modal. This, however, disappears on my iphone under the exact same dimensions on my computer.

Please add beforeClose function to API. So I could not close with unsaved information.
like this:

beforeClose: function(){
	return true; // — close
	return false; // — nothing happens, window still showing
}

Hello,

nice modals!
Can you please add scss files?

thanks

Is there a way to display correctly map inside modal ?

Hello,

Do you intend to make this available through npm?
I like to manage all my project's dependencies through npm and don't want to have to install another package manager 😢

Thank you.

Love this plugin but not in love with the little bounce on open. Maybe an option for just a simple fade?

Bonjour,
Serait-il possible de d'ajouter une méthode pour set le content à partir d'un DOMElement, parce que le setContent actuel ne permet de passer du contenue avec des events (click) déjà bindés
Merci

Hi Robin,

just wanted to know there was a way to handle the links in the content of the modal, with JQuerys eventListeners for example. When I click on these Links they just don't react, although I attached some eventlisteners to them. I really find your plugin awesome ;)

Thanks.

Tingle appears to be broken on IE since flexbox is used for positionning (except on edge).

Somes issues:

• background-color doesn't work fine with modal bigger than viewport
• sticky footer doesn't work at all

Firstly, great plugin! Thank you for making this.

I was wondering if it is posibble to add before open event so that we can make some changes to the modal structure. For example I would like to change the close button with a custom one using an image or maybe you can add an option parameters to change the content of the close button.

Thank you

Hey!

It's the first time I'm using Tingle, and I'm enjoying it so far!
Now, as I'm using it, I'm noticing some stuff that could (imo) be changed/improved/implemented.
(I apologize in advance if any of this things are already implemented, or in the 'TODO', or if I'm just misusing the plugin ... or, you know, if they're just dumb ahah )

• ~~ Have a seperate modal.setTitle() method ~~
• Have an option for showing/hiding the default close button (I'm using footer buttons to close the modal)
• Add opacity and visibility to the .tingle-modal's transition (so that it fades out nicely)
• Have a way to keep the window scrollbar (I know they disappear for a reason, but I don't really like the little "translation" they cause when appearing and disappearing) (I wouldn't mind the content underneath the modal to be scrollable as a side-effect)
• Have a .less file too (because, vars)

I'd be more than happy to help out, so let me know if I should start submitting PRs left and right 😃

Edit: I just noticed there's already a PR for the modal.setTitle() method, so forget about that one.

I haven't dived in yet enough to check if this happens in general, but the demo has the scrollbar flash away then back into view then back away when I try it out on Chrome, which I find a bit distracting. It would be nice for the scrollbar hiding to be made smoother.

If you play the YouTube video on the demo page and then close the modal, the video continues to play and the audio can be heard in the background.

As I integrate Tingle into my workflow components, I will attempt to fix the issue and submit a PR if you don't get to it first.

Hello,
Thanks to the author for his work.
I suggest this feature: add an option to disable closing modal when clicking outside the modal.
Although, there is a conflict between this closing event and scrollbar when content is too big: you cannot use left click mouse to move the scrollbar because it will automatically trigger closing event.
Thanks to read me.
See you

Hi Robin, I have a new issue regarding the blazy plugin in regards to your modal. This time I would like to use it in my portfolio thumbnails just as I used in the modals. But it works differently with code, and the way I'm coding isn't the correct way.
Here are the javascript codes I've tried:

window.bLazy = new Blazy({ container: '.portfolio-wrapper', success: function(element){ console.log("Element loaded: ", element.nodeName); } });

var thumbnails = new Blazy({ onLoad: function() { new Blazy({ container: '.portfolio-wrapper' }) } });

None worked... here is the thumbnail in html:

<div class="portfolio illustration" data-cat="illustration">
<div class="portfolio-wrapper">		
<button type="button" id="lightbox-1"><img class=""http://placehold.it/480x480/ffffff/ffffff" data-src="img/work/matrix typography/thumb.jpg" alt=""/></button>
<div class="label">
<div class="label-text">
<a class="text-title">Matrix Typography</a>
<span class="text-category">Illustration</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>

I've created a separate class called "b-lazy-thumbs" and used it like this:

||".b-lazy, .b-lazy-thumbs";a.options.separator=a.options.separator||