Fatal编程技术网
  • javascript/
  • Javascript 如何进行拖动引导模式

Javascript 如何进行拖动引导模式

javascript jquery css

Javascript 如何进行拖动引导模式,javascript,jquery,css,bootstrap-modal,Javascript,Jquery,Css,Bootstrap Modal,大家好，我是JQuery的初学者，我使用了正常的引导模式，但我的要求是模式应该是拖动山墙。我尝试过这段代码，但这不起作用。我也尝试过在脚本中添加警报，请查找我哪里做错了，这是我的代码 <html lang="en"> <head> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.mi

大家好，我是JQuery的初学者，我使用了正常的引导模式，但我的要求是模式应该是拖动山墙。我尝试过这段代码，但这不起作用。我也尝试过在脚本中添加警报，请查找我哪里做错了，这是我的代码

<html lang="en">
<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link data-require="bootstrap-css@3.3.6" 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>


$（'.modal content'）。可调整大小({
警报（“om”）；
//alsoResize:“.modal对话框”，
身高：300，
最小宽度：300
});
$（'.modal dialog'）.draggable（）；
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（this.find（'.modal body'）.css({
“最大高度”：“100%”
});
});
启动演示模式
&时代；
情态标题
在结束正文之前放置自定义脚本，并在Dragable中为类设置
句柄


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





启动演示模式
&时代；
情态标题
$（'.modal dialog'）。可拖动({
“句柄”：“.modal头”
});

使用此
$（“#myModal”）.draggable({
句柄：“.modal头”

});
 感谢您的回答，如何重新调整（减少或增加）madal弹出窗口的大小。只需删除警报检查，它就会起作用，请参阅“使用此”答案在StackOverflow（以及所有堆栈交换站点）上的值很低，因为它们在授权/教育未来研究人员方面做得很差。每当你发布一个答案时，总是要解释你的答案是如何工作的，为什么这是一个好主意，也许还要添加一个指向文档的链接。代码格式可用，在过帐时应使用。