javascript - jquery 对话框可拖动和可调整大小

Question

我想使用 jquery 使我的 div 可拖动和调整大小。这是一个简单的 div:

<div id="dialog-modal-alerts" title="Alerts" style="display:none;"></div>

这就是我使用 jquery 的方式:

$("#dialog-modal-alerts").dialog({
            height: 500,
            width: 900,
            title: strTitle,
            resizable:true,
            draggable:true,
            dialogClass: "alertDialog",
            //buttons: [{ text: "Ok", click: function() { $( this ).dialog( "close" ); } }],
            close: function (event, ui) { closeDialog(number) },
            modal: true
        });

而且它不起作用。如果我写

$(function () {
        $("#dialog-modal-alerts").draggable();
    });

但是如果我写

$(function () {
        $("#dialog-modal-alerts").resizable();
    });

还是不行有人可以帮助解决我的问题吗？

Answer 1

你检查了吗？默认情况下，它是可拖动的对话框和可调整大小的

http://jqueryui.com/dialog/#modal

它是关于 strTitle 尝试删除它并添加“标题”或任何东西并关闭(数字)确保数字和 strTitle 作为有效变量存在。

我创建了这个例子，我工作正常:

    <div id="dialog-modal-alerts" title="Alerts" style="display:none;">

        Hlllo
        Ahmed Alaa<br />

    </div>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
      $(function () {
          $("#dialog-modal-alerts").dialog({
              height: 500,
              width: 900,
              title: 'Hi',
              resizable: true,
              draggable: true,
              dialogClass: "alertDialog", 
              modal: true
          });
      });