Responsive Modal

Adapted for Mobile Devices

Responsive Modal Popup Window for Mobile Devices

RWD Optimized for Different Screen Resolutions

The RWD functionality has been added to the application to allow for adjustment of settings on different screen resolutions. As with most of the modules offered by Compsoul, the declaration of settings for specific resolutions is done by editing the responsive options in the module options. For example: to assign special settings for screens below a width of 1300px, you need to create and configure an instance in the following way:

<script>
  new Modal().options({
    responsive: {
      1300: {
        slider: ".modal-slider",
        open: ".modal-open"
      }
    }
  }).init();
</script>

As you can see, the modal takes special settings for the "slider" and "open" options on devices with screens below the declared width of 1300. The application allows for the declaration of more than one threshold, but it is important to remember to maintain the appropriate, increasing order. For example:

<script>
  new Modal().options({
    responsive: {
      480: {
        slider: ".modal-mobile",
        open: ".modal-mobile"
      },
      940: {
        slider: ".modal-tab",
        open: ".modal-tab"
      },
      1300: {
        slider: ".modal-slider",
        open: ".modal-open"
      }
    }
  }).init();
</script>

Launching the application on screens above the highest declared resolution results in loading the default settings. However, we can declare default settings and combine them with the responsive option as follows:

<script>
  new Modal().options({
    slider: ".modal-mobile",
    open: ".modal-mobile",
    responsive: {
      480: {
        slider: ".modal-mobile",
        open: ".modal-mobile"
      },
      940: {
        slider: ".modal-tab",
        open: ".modal-tab"
      },
      1300: {
        slider: ".modal-slider",
        open: ".modal-open"
      }
    }
  }).init();
</script>

Thank You for Reading

We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.