どのようにドラッグ可能なブートストラップモーダル

こんにちは私はJQueryの初心者です、私は通常のブートストラップモーダルを使用していますが、私の要件は、モーダルはドラッグゲーブルでなければなりません。私はこのコードを試しましたが、また、私が間違っていた箇所を見つけてください。ここに私のコードです。どのようにドラッグ可能なブートストラップモーダル

<html lang="en"> 
<head> 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" /> 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
<script> 
$('.modal-content').resizable({ 
alert("om"); 
     //alsoResize: ".modal-dialog", 
     minHeight: 300, 
     minWidth: 300 
    }); 
    $('.modal-dialog').draggable(); 

    $('#myModal').on('show.bs.modal', function() { 

     $(this).find('.modal-body').css({ 
     'max-height': '100%' 
     }); 
    }); 
</script> 
</head> 
<body> 
    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
    </button> 
    <!-- Modal --> 
    <div class="modal fade" 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"> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

出典

2017-09-13 sp21 p

体を終了する前に、カスタムスクリプトを入れて、ドラッグであなたのクラスにhandleを設定します。

$('.modal-dialog').draggable({ 
     "handle":".modal-header" 
     });

<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<body> 
 
    <!-- Button trigger modal --> 
 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
    </button> 
 
    <!-- Modal --> 
 
    <div class="modal fade" 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"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script> 
 
    $('.modal-dialog').draggable({ 
 
    \t "handle":".modal-header" 
 
     }); 
 
</script> 
 
</body> 
 
</html>

出典

2017-09-13 08:29:39 bhansa

おかげさまで、マダールポップアップのサイズを変更（減少または増加）する方法に感謝します。 –

アラートチェックを削除するだけです。[this]（https://jsfiddle.net/7j3gvzdf/）を参照してください。 – bhansa

用途この $（ "＃myModal"）ドラッグ（{ ハンドル： ".modalヘッダ" }）。

出典

2017-09-13 08:34:41 ask4brajesh

どのようにドラッグ可能なブートストラップモーダル

答えて

関連する問題