In this article I will explain with an example, how to Stop (Disable) Drag (Turn off Draggable) in jQuery UI Dialog Modal Popup box.
The Draggable feature can be turned off in jQuery UI Dialog Modal Popup box using the draggable option.
 
 
Stop (Disable) Drag (Turn off Draggable) in jQuery UI Dialog Modal Popup
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and a Button.
The jQuery UI Dialog Modal Popup box is initialized inside the jQuery document ready event handler.
The Button has been assigned a jQuery Click event handler and when the Button is clicked the jQuery UI Dialog Modal Popup box is shown using the jQuery Dialog “open” command.
Note: To learn more about opening jQuery UI Dialog Modal Popup box on Button click, please refer my article, Open (Show) jQuery UI Dialog Modal Popup on Button Click.
In order to disable the draggable feature of the jQuery UI Dialog Modal Popup box, the draggable property needs to be set to false.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
            width: 300,
            height: 150,
            draggable: false
        });
        $("#btnShow").click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align="center">
    This is a jQuery Dialog.
</div>
 
 
Screenshot
Stop (Disable) Drag (Turn off Draggable) in jQuery UI Dialog Modal Popup
 
 
Demo
View Demo
 
 
Downloads
Download Code