javascript - How to do Draggable Bootstrap modal

Hi I am the beginner of JQuery, I have used normal bootstrap modal,But My requirement is modal should be drag-gable.I have tried this code but this is not working.I tried putting alert inside script also,Please find where I did wrong, Here is my code.

<html lang="en">
<head>
  <script data-require="jquery@*" data-semver="2.2.0" src=".2.0/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src=".3.6/js/bootstrap.min.js"></script>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href=".3.6/css/bootstrap.css" />
  <link rel="stylesheet" href=".11.3/themes/smoothness/jquery-ui.css" />
 <script src=".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>

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

Share Improve this question asked Sep 13, 2017 at 8:19 sp21 p 631 gold badge3 silver badges7 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Put your custom script before ending the body and set handle to your class in draggable.

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

  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn./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./bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="https://code.jquery./ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery./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({
    	"handle":".modal-header"
      });
</script>
 </body>
</html>

Use this $("#myModal").draggable({ handle: ".modal-header" });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to do Draggable Bootstrap modal - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)