Destroy or remove

[psweeting1]

There doesn't seem to be an option to remove or destroy the Model. I'd like to make the model stop working at certain screen sizes.

[anseki]

Hi @psweeting1, thank you for the comment. So, do you mean that you don't want to make the Modal when at certain case?

[psweeting1]

Hi @anseki fantastic plugin. Pretty much, when I get a screen width less than 1200 pixel I wish to remove or prevent the model from activating. At the moment I use it on to load previewed images, but when on mobile / small devices I need it to stop.

[anseki]

The current version of jQuery-plainModal doesn't support destroying the modal (restoring content). Therefore, your script has to do instead, but that may be easy. For example,

<div id="container">
  <img id="image">
</div>

const content = $('#image'),
  modal = $('#container').plainModal();

Your script should run by a trigger like window.matchMedia. Then, that does content.append(document.body) or content.append(container).

[psweeting1]

That's really helpful thank you, I now have a better idea on my options. I think I would try using CSS condition instead of window.matchMedia for support reasons.

$(window).resize(function(){     

       if ($('.container').width() == 1200 ){

             content.append(document.body);

       }

});

Just an Idea. Thanks again for your time and help.

[anseki]

This line in your code:

if ($('.container').width() == 1200) {

should be:

if ($('.container').width() <= 1200) {

And, your idea checking a size of container may be no good. It requires that the container must be resized always when a window is resized, and it must not conflict with a stylesheet in a page. E.g. if the container has width: 1300px, that code never run. And also, that code is called repeatedly when window is resized, again again and again... very many times... That is called when resized to 1201, 1202, 1203... and more.

I recommend window.matchMedia that is used typically, and it is more easy and simple way. In many cases, a web page supports "Responsive Web Design" (RWD) by using "CSS3 media queries". Therefore a script code does something based on "CSS3 media queries" (i.e. window.matchMedia) when the web page is layouted with RWD.

For example: Your web page is designed with 1200px break point. This break point makes wide-layout or small-layout.

const mql = window.matchMedia('screen and (min-width: 1200px)');
mql.addListener(event => {
  if (mql.matches) {
    // Do something for wide-layout
    content.append(container);
  } else {
    // Do something for small-layout
    content.append(document.body);
  }
});

/* small-layout */
#container {
  width: 960px;
}

@media only screen and (min-width: 1200px) {
  /* wide-layout */
  #container {
    width: 1024px;
  }
}

If you want, you can add more break points like "tablet-layout", "print-out-layout" that is used for printer (it does not check width of the page), etc,.

[psweeting1]

This is great, thank you for your time and help, I'm fairly new to jQuery if you couldn't tell. This should open up more doors for me in my options.

Thanks again!

[anseki]

😄