CODEWITHSUNDEEP
javascripthtmlcss
Hippolyte BRINGER
Hippolyte BRINGER

Reputation: 853

Disable modal for small screen

I would like to disable / desactived modal for a small screen. I tried to use Class="hidden-xs"with Bootstrap, this desactive my modal but block my screen.

My Html :

  <div class="row">
    <div class="col-sm-3">
        <p class="titre">Nature morte à l'écrevisse</p>
        <img src="img/1.jpg" style="width:100%" alt="Peinture à huile clair obscur"data-toggle="modal" data-target="#myModal1">
          <div class="modal fade" id="myModal1" role="dialog" >
            <div class="modal-dialog" >
              <div class="modal-content"style="background-color: rgba(0,0,0,0) !important;border-style: none; box-shadow: none;">
                    <h4 style="color: white !important;">Nature morte à l'écrevisse</h4>
                    <img src="img/1.jpg" class="" style="width:100%;" alt="Peinture à huile clair obscur">
                    <p style="color: white !important;">150x120 cm avec cadre -  A Vendre</p>
              </div>  
            </div>
          </div>
    </div>

I would like to disable / erase the code below for a small screen :

        <div class="modal fade" id="myModal1" role="dialog" >
            <div class="modal-dialog" >
              <div class="modal-content"style="background-color: rgba(0,0,0,0) !important;border-style: none; box-shadow: none;">
                    <h4 style="color: white !important;">Nature morte à l'écrevisse</h4>
                    <img src="img/1.jpg" class="" style="width:100%;" alt="Peinture à huile clair obscur">
                    <p style="color: white !important;">150x120 cm avec cadre -  A Vendre</p>
              </div>  
            </div>
          </div>

With CSS or maybe in JavaScript ?

Any help or tips would be appreciate :)

EDIT 1 :

I have this script in my code, maybe it's not a good version ?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

This is the link of my website : https://www.vmbringer.fr/

Upvotes: 0

Views: 463

Answers (2)

salvatore
salvatore

Reputation: 521

You can attach an event handler to the modal show event (show.bs.modal). The modal will not show if you return false from the event handler, so you can check the user agent and return false if the agent matches.

$(".modal").on('show.bs.modal', function(e){
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    e.preventDefault();//Works from Bootstrap 3.0.0
    return false;
  }
});

EDIT

This is a JSFiddle: https://jsfiddle.net/tmvj7xk9/

In the fiddle i have used width for mobile detection, because it's easier for testing purposes.

EDIT 2

According to the documentation, from version 3.0.0 all infinitive bootstrap events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

EDIT 3 Another way of preventing the modal is to add a listener on click on the triggering element, and cancel the event there.

$(document).ready(()=>{
    $('body').on('click', '[data-toggle="modal"]', function (e) {
        if ($(window).width() < 900) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    });
});

Upvotes: 1

Justinas
Justinas

Reputation: 43451

Try using show.bs.modal event to cancel modal showing:

$('#myModal').on('show.bs.modal', function (e) {
    if ($(window).height() < 970) {
        e.preventDefault();
        $(this).modal('hide');
    }
});

Upvotes: 2

Related Questions