Wie Ziehbare Bootstrap modal

Hallo, ich bin der Anfänger von JQuery zu tun, habe ich normalen Bootstrap-modal, aber meine Forderung ist modal sollte Drag gable.I versucht haben, diesen Code, aber das ist nicht working.I versucht verwendet Alarm setzen Im Script auch, bitte finde wo ich falsch gemacht habe, hier ist mein Code.Wie Ziehbare Bootstrap modal

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

Quelle

2017-09-13 sp21 p

Setzen Sie Ihr eigenes Skript vor dem Körper zu beenden und setzte handle Ihre Klasse in ziehbar.

$('.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>

Quelle

2017-09-13 08:29:39 bhansa

Dank für Ihre Antwort, wie Größe neu (Abnahme oder Zunahme), dass madal Popup. –

nur die Alert-Check entfernen und es wird funktionieren, siehe [diese] (https://jsfiddle.net/7j3gvzdf/) – bhansa

verwenden $ ("# myModal") ziehbar ({ Griff: ".modal-header" }).

Quelle

2017-09-13 08:34:41 ask4brajesh

Wie Ziehbare Bootstrap modal

Antwort

Verwandte Themen