day14—jQuery UI 之dialog部件

转行学开发，代码100天——2018-03-30

今天主要展示jQuery UI 之dialog部件的用法，

参考文档：https://jqueryui.com/dialog/ 

本文记录分享初始的引用示例：

<div id="div">
        <p>这是一个dialog</p>
    </div>
    <a href="#" id="btn">按钮</a>

dialog部件效果，只需调用

 $("#div").dialog()即可，其中dialog样式及动作可以在参数中设置。

$(document).ready(function()
{
    
  $("#btn").button().on("click",function()
  {
      $("#div").dialog({
      resizable: false,
      height: "auto",
       400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });  
  });
  
});

 最后执行的效果：

课后练习文档中的示例：