モバイル向けのブートストラップモードのみを表示します。デスクトップ用ではありません。

Question

私は、モバイルとデスクトップのブートストラップモーダルに関して厄介な問題があります。

ので、質問が短くなります。

私は​​および唯一のモバイル/タブレットのために有効にすることができますどのように？

Here is a small js for tests:

Answer 1

あなたはresponsive utilitiesクラスを使用することができます。あなたのケースでは、あなたがモバイル上にあるかどうかを確認するには、いくつかの方法があります

<div class="modal fade hidden-lg hidden-md" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

Answer 2

モーダルボックスに.hidden-mdまたは.hidden-mdクラスを使用する必要があります。あなたはread more hereです。

は、この例では、私はちょうど画面のwidthを使用し、それに基づいてモーダルを表示するかしない場合を決めた：ここ

$('#myModal').on('show.bs.modal', function (e) { 
    if (window.innerWidth < 800) { 
    return e.preventDefault(); 
    } 
}) 

はあなたのjsfiddleの更新です：
http://jsfiddle.net/1aeur58f/28/

Answer 3

UHTMLで.hidden-lgクラスを使用できます。下のコードをチェックすると、大きなデバイスでdivを非表示にします。 参照 - Bootstrap Responsive Utilities

jsfiddle

<div class="panel panel-warning hidden-lg" id="mymodal" data-toggle="modal" data-target="#myModal"> 
    <div class="panel-body"> 
    <h3>click on panel to open the modal</h3> 
    </div> 
</div> 
<!-- Modal --> 
<div class="modal fade hidden-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
    <div class="modal-body"> 
    ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>