2016-08-02 3 views
1

Ich versuche, ein Modal für Mobile und Tablets erscheinen zu verstecken.Hidden-md-down funktioniert nicht

In Bootstrap, ich bin mit versteckten-md-down und es funktioniert, aber es war nicht mehr funktioniert und ich habe nichts ändern:

$(function(){ 
 
    $('##myModal').modal('show'); 
 
});
<div class="ie-only" style="overflow-y:hidden;"> 
 
     \t <div class="modal fade in hidden-md-down" id="myModal" aria-hidden="false"> 
 
      \t <div class="modal-dialog modal-md custom-height-modal"> 
 
       \t <div class="modal-content"> 
 
        \t   \t <div class="modal-header topGrad" 
 
         \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
          <h2 class="modal-header" style=""filter: alpha(opacity=200);">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br /> 
 
          <b>Use the links below to download a new browser or upgrade your existing browser.</b></p> 
 
         </div><!---Modal-Header Div---> 
 
         <div class="modal-body"> 
 
         \t <div class="row"> 
 
           <div class="col-sm-offset-2 col-sm-2 overrides-col-md-offset-2 col-md-2 text-center"> 
 
            <div class="hidden-xs"><a target="_blank" href="https://www.google.com/chrome/browser/desktop/index.html"><img alt="Chrome" height="200px" src="/default/images/chrome.png" width="440px" /></a></div> 
 
         
 
            <h6><a class="text-black" target="_blank" href="https://www.google.com/chrome/browser/desktop/index.html">Chrome</a></h6> 
 
           </div> 
 
         
 
           <div class="col-sm-2 col-md-2 text-center"> 
 
            <div class="hidden-xs"><a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/?f=86"><img alt="Firefox" src="/default/images/firefox.png" /></a></div> 
 
         
 
            <h6><a class="text-black" target="_blank" href="https://www.mozilla.org/en-US/firefox/new/?f=86">Firefox</a></h6> 
 
           </div> 
 
         
 
           <div class="col-sm-2 col-md-2 text-center"> 
 
            <div class="hidden-xs"><a target="_blank" href="https://www.microsoft.com/en-us/download/internet-explorer.aspx"><img alt="Internet Explorer" src="/default/images/internet_explorer.png" /></a></div> 
 
         
 
            <h6><a target="_blank" class="text-black" href="https://www.microsoft.com/en-us/download/internet-explorer.aspx">Internet Explorer</a></h6> 
 
           </div> 
 
         
 
           <div class="col-sm-2 col-md-2 text-center"> 
 
            <div class="hidden-xs"><a target="_blank" href="https://support.apple.com/downloads/safari"><img alt="Safari" src="/default/images/safari.png" /></a></div> 
 
         
 
            <h6><a class="text-black" target="_blank" href="https://support.apple.com/downloads/safari">Safari</a></h6> 
 
           </div> 
 
\t \t \t \t \t \t \t </div> 
 
         </div><!---Modal-Body Div---> 
 
         <div class="modal-footer botGrad" <!---style="background-image:('/mura-6.2.6407/Regal-en-us/images/extended_bottom_provider.gif');"---> style="background-color:##4f89cc; filter: alpha(opacity=80);"> 
 
         \t <p class="text-center"><a class="btn btn-default" data-dismiss="modal" style="filter: alpha(opacity=100);">Close</a></p> 
 
         </div><!---Modal-Footer Div---> 
 
        </div><!---Modal-Content Div---> 
 
       </div><!---Custom Height Div---> 
 
      </div><!---Modal Fade in Div---> 
 
     </div><!---Start of Modal Div---> \t \t \t \t 
 
\t \t <!--End of Modal container-->

Jede mögliche Hilfe würde geschätzt .

+0

'$ existiert ('## myModal')' Tippfehler hier. Verwenden Sie single '#' – brk

+0

@ user2181397 Sorry, ich bin in Coldfusion und wenn ich single #, wird es abstürzen. Entschuldigen Sie, dass Sie diese Information nicht hinzugefügt haben –

+0

Verwenden Sie Bootstrap 4? – ZimSystem

Antwort

1

In Bootstrap 3 die Klassen sind hidden-md, hidden-sm, hidden-xs, etc ..

Die hidden-md-down Klasse nur in Bootstrap 4.

+0

Wenn ich Bootstrap aktualisieren würde ich derzeit Bootstrap 4 verwenden, würde Auswirkungen auf alle Änderungen, die ich derzeit habe oder Bootstrap 4 alle Klassen, die die haben vorherige Version, die ich verwende? –

+0

Bootstrap 4 wurde nur in Alpha veröffentlicht, und die Klassen unterscheiden sich von Bootstrap 3. Es ist nicht beabsichtigt abwärtskompatibel zu sein. – ZimSystem

+0

Ich konnte es verwenden, ohne auf 4 zu gehen, ich habe gerade die gleiche Bootstrap-Datei gelöscht und hochgeladen und jetzt funktioniert es wieder –

Verwandte Themen