not able to hide a div in mobile view

Question

i have created a popup for my website, but i want to hide it for mobile devices. i have done as below to hide it

    .modal-content{
      width: 440px;
    margin-left: 40px;
    margin-top: -15px;
    }
    .modal-header{
      height: 5px;
    }
    .peep{
      margin-top: -6px;
    }
    @media screen and (max-width: 600px) {


        
.money{
  display: none;
}

    }

its not shown when i do this, but the problem is a light dark shade is shown like the image below and the screen is not moving,not scrolling.

<script type="text/javascript">
     $(document).ready(function(){
      $("#myModal").modal('show');
     });
    </script>

<div class="money">
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="peep"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
                </div>
                <div class="modal-body">
        <img  style="margin-left:-7.5px; margin-top:-10px;" src="assets\images\popup.jpg" alt="offer">
                </div>
            </div>
        </div>
    </div>
</div>

this is the full code of the popup. can anyone tell me whats wrong with it?

score 0 · Answer 1 · answered Apr 17 '19 at 09:44

0

You can get media screen via JS and now call show modal if your screen more than some size or

answered Apr 17 '19 at 09:44

Bodik

1
3

or other condition – Bodik Apr 17 '19 at 09:45
what are you even saying, can you answer properly with code – Apr 17 '19 at 09:46
$(window).width(); – Bodik Apr 17 '19 at 09:47
if ($(window).width() > 600px){ $("#myModal").modal('show'); } – Bodik Apr 17 '19 at 09:47
the code is not properly formatted, can you edit it with my code and write as an answer – Apr 17 '19 at 09:49
also you can check if device is mobile instead condition with width. see https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery – Bodik Apr 17 '19 at 09:53
– Bodik Apr 17 '19 at 09:54

Sunil Kashyap · Answer 2 · 2019-04-17T09:57:09.047

The black background is because modal content is hidden but modal is triggered, as I see you write modal('show') in document.ready function.

in document ready check whether the device is mobile or not and then trigger modal('show').

<script type="text/javascript">
        $(document).ready(function(){
            if (typeof window.orientation === 'undefined') {  // to check device is mobile/browser
                 $("#myModal").modal('show');
            }
        });
</script>

so the modal won't get triggered if the device is mobile.

or use CSS

@media screen and (max-width: 600px) {
  .money, .modal-backdrop {
      display: none !important;
    }
}

fiddle - https://jsfiddle.net/skdroid/mp4gt102/5/

Did you check on mobile or web browser? js code only works on if you use a mobile device, or use CSS I've updated the answer. — Sunil Kashyap, Apr 17 '19 at 09:55

Danny · Answer 3 · 2019-04-17T10:05:07.430

You have in your CSS the following part:

    @media screen and (max-width: 600px) {   
      .money{ //note, its a class value
         display: none;
       }
}

As you know CSS follows a 'points' system (so your CSS file knows what to override).

However you stated in your script:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myModal").modal('show'); //note, its the ID
    });
</script>

And as we know: the value of id>class. So when the document loads, it tells your document to show the modal, but since it's an ID vs a class, it overrides the class CSS value.

Reference to point system and how it works: Points in CSS specificity

Solution:

You could (as stated in the comment section) place something like this in your file:

<script type="text/javascript">
    $(window).on('load resize', function() {
    if ($(window).width() > 600px){
       $("#myModal").modal('show');
    } else {
       $("#myModal").modal('hide');
     }
});
</script>

Made the edit, check it out. Take away the CSS part, so you know for sure nothing is overriding or no odd behaviour is performed. Then check and play around with the solution provided. If it helped you out, please do not forget to check mark the right answer. Have a nice day :) — Danny, Apr 17 '19 at 09:53

score 0 · Accepted Answer · answered Apr 17 '19 at 09:55

0

Use the below code in your script. It will not display a popup for below 600 resolution

$(window).on('load resize', function() {
    if ($(window).width() > 600){   
        $("#myModal").modal('show');
    }   
});

answered Apr 17 '19 at 09:55

Praveen

985
8
31

score -1 · Answer 5 · answered Apr 17 '19 at 09:51

-1

Use this code for hide in mobile view

<style type="text/css">
@media only screen and (min-width: 200px) and (max-width:500px) {
    .money .modal{ display:none !important;}
}
</style>

answered Apr 17 '19 at 09:51

Chetan

133
1
5
17

Please check the css in source – Chetan Apr 23 '19 at 10:11

not able to hide a div in mobile view

5 Answers5