CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user198003
user198003

Reputation: 11151

My Bootstrap modal is not draggable?

Can you help me why my modal window is not draggable. I'm using Bootstrap 3.0.3.

Error I'm getting is: draggable is not a function

Modal is called with next link:

<a href="#" class="btn btn-info btn-xs" role="button" data-toggle="modal" data-target="#modalContract" id="showModalContract"><span class="glyphicon glyphicon-search"></span>Search</a>

Modal window is created with next code:

<div class="modal fade bootstrap-dialog-draggable" id="modalContract" tabindex="-1" role="dialog" aria-labelledby="modalContractLabel" aria-hidden="true" >
  <div class="modal-dialog"  style="width:1200px;height:700px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modalContractLabel">Search</h4>
      </div>
      <div class="modal-body" style="height:520px;">
            <iframe src="/contracts/index/" style="width:100%;height:400px;border:0px;"><p>Your browser does not support iframes.</p></iframe>
            <div class="form-group clear">        
            </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
    .modal-header {
        cursor: move;
    }
</style>


<script>
$(document).ready(function() {

    $("#modalContract").draggable({
    handle: ".modal-header"
    }); 


});
</script>

Upvotes: 1

Views: 6798

Answers (2)

Shwan Namiq
Shwan Namiq

Reputation: 631

You can see this code to to draggable bootstrap modal

HTML CODE

<div class="side-menu" id="sideMenu">
<menu>
    <ul class="nav nav-tabs nav-stacked">
        <li><a href="#myModal" data-backdrop="false" data-toggle="modal">Click Me</a>
        </li>
    </ul>
</menu>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Settings</h4>

        </div>
        <div class="modal-body">
            <p>Settings</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

CSS CODE

.modal
{
overflow: hidden;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}

JQUERY CODE

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

DEMO

Upvotes: 0

Blaise
Blaise

Reputation: 13489

The way you're calling it, draggable is a jQuery UI feature.

So you need to include jQuery UI in your page: https://jqueryui.com/

There are also alternative bootstrap modal plugins that don't require jQuery UI, like https://nakupanda.github.io/bootstrap3-dialog/

Upvotes: 4

Related Questions