close button inside modal?

[ghost]

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.

[robinparisi]

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.

[ghost]

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

[robinparisi]

Indeed, onOpen is called at the end of the transition. I will consider adding an option to choose the close button location.

[ghost]

OK, either an option, or an onBeforeOpen method or something :-)

[mazzucode]

I think this improvement would be great! In my case the usability will be better

[robinparisi]

I'll review the structure for 1.0 release and try to implement this feature as well.

[mijewe]

+1

I've got around this by adding a close button to the footer, and positioning the footer at the top of the modal.

[destinyLMarketing]

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.

[coxy17]

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