Semantic-ui: 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.

[hammy2899]

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

[hammy2899]

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')