Как реализовать легкое, немодальное, изменяемое по размеру и с возможностью сглаживания всплывающее окно

Question

Я хочу иметь страницу, в которой я хочу отобразить всплывающее окно, которое можно изменить по размеру и свести к минимуму, до маленькой кнопки, отображаемой в верхнем углу. Когда кнопка нажата, я хочу, чтобы она вернулась к предыдущему размеру.

Содержимое будет содержать только текст.

Как я могу это сделать? Должен ли я использовать jqueryUi?

Answer 1

Вы можете использовать jqueryUI Dialog Widget, чтобы соответствовать этому.

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