如何做Draggable Bootstrap模式

嗨，我是JQuery的初学者，我使用了正常的bootstrap模态，但我的需求是模态应该是drag-gable.I已经尝试过这段代码，但这不起作用。我试着把alert里面的脚本也，请找到我做错了，这是我的代码。如何做Draggable Bootstrap模式

<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

如何做Draggable Bootstrap模式

回答

相关问题