如何实现轻量级、非模态、可调整大小和最小化的弹出窗口

Question

我想要一个页面，我想在其中显示一个弹出窗口，该弹出窗口可调整大小并可最小化到左上角显示的小按钮。单击按钮时，我希望它 return 恢复到以前的大小。

内容将只包含一些文本。

我该怎么做？我应该使用 jqueryUi 吗？

Answer 1

您可以使用 jqueryUI 对话框小部件来完成此操作。

CSS

.hidden {
    display: none;
}

HTML

<p class="hidden" id="placeholder">Expand</p>
<div id="dialog-message" title="Simple Dialog">
    <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
This is your basic dialog!</p>
</div>

JS

 $(function () {
     $("#dialog-message").dialog({
         modal: false,
         buttons: {
             Ok: function () {
                 $(this).dialog("close");
                 $("#placeholder").removeClass('hidden');
             },
             autoOpen: true
         }
     });
     $("#placeholder")
         .button()
         .click(function (event) {
         $("#dialog-message").dialog("open");
         $("#placeholder").addClass('hidden');
     });
 });

JSFiddle Of Solution

请在 JQuery UI Dialog

查看文档

如何实现轻量级、非模态、可调整大小和最小化的弹出窗口

How to implement a lightweight, non-modal, resizable and minimise-able popup

jquery-ui

popup

non-modal