Open ghost opened 8 years ago
Hi,
I'm thinking about this possibility but I would like to keep the close button always visible at the same place, even if the modal is bigger than the screen. I also plan to run some UX tests about this configuration, and will update tingle consequently.
Currently I'm doing it in onOpen callback, but of course there's a bit of a delay, it seems onOpen is called only after animation finishes.
onOpen: function() {
var close = document.querySelector(".tingle-modal__close");
var modalContent = document.querySelector(".tingle-modal-box__content");
modalContent.appendChild(close);
}
Indeed, onOpen is called at the end of the transition. I will consider adding an option to choose the close button location.
OK, either an option, or an onBeforeOpen method or something :-)
I think this improvement would be great! In my case the usability will be better
I'll review the structure for 1.0 release and try to implement this feature as well.
+1
I've got around this by adding a close button to the footer, and positioning the footer at the top of the modal.
Hello! I have a quick suggestion! I think it would be super helpful on the documentation to label the modalSurprise button with something other than a "?". I was STRUGGLING to figure out how to get my youtube video to stop playing/close on exit and had no idea the solution was there. Maybe label it Iframe modal etc. Either way HUGE THANKS for this.
I have a CSS solution for not moving the close button but instead makes the existing close button 'sticky' and then you can adjust the position to your liking.
.tingle-modal .tingle-modal__close { position: sticky; top: 50px; margin-left: auto; margin-top: 50px; margin-right: 50px; }
then on mobile i used this CSS, but is optional depending upon the margins etc specified above.
@media (max-width: 540px) { .tingle-modal .tingle-modal__close { top: 0px; margin-top: 0px; } body .tingle-modal { padding-top: 0; } }
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.