Display semantic UI modal only for mobile and not for desktop

[jaipundir]

I have use semantic ui model popup for showing data. In my case I want showing popup model in only mobile View. I have Use following code :

<div class="mini ui modal">
  <div class="image content">
    <div class="description">
      <div class="ui header">Showing FOr EROR</div>                     
      <p>USe data</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui positive right labeled icon button">
      Yes                      
    </div>
  </div>
</div>

In JS $('.ui.modal').modal('show');

So how can i disable this popup for desktop view only view in Mobile thanks.

[fridzema]

I think you should arrange this in javascript before calling the modal. As far as i know there is nothing in semantic-ui for this behaviour.

[y0hami]

Have you tried using the device visibility classes to only show the option when on mobile https://semantic-ui.com/collections/grid.html#device-visibility

[jaipundir]

I have not getting any help from url @hammy2899

[y0hami]

What do you want, an option in the modal to explicitly only allow it to open on mobile devices?

[fridzema]

Something like this should work:

var md = new MobileDetect(window.navigator.userAgent);

if(md.tablet() || md.mobile()){
  $('.ui.modal').modal('show');
} else {
 // Do something else
}

http://hgoebl.github.io/mobile-detect.js/

[jaipundir]

I am using aurelia js with semantic ui. so i cant add mobile-detect.js file in my application. THis number of code not work for me.

[fridzema]

Hmm don't know why you can't add it, should not be a problem. This is just an example how you can do it. You should find your own way for detecting this, there are a lot of ways to this.

[ComLock]

If it where a sidebar you could use:

$('#mySidebar').sidebar('is mobile')