ace加 jqueryui 的 dialog弹出窗口

HTML

 <div id="dialog-message" class="hide">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
                                    </div>
                                </div>

                                <div class="hr hr-12 hr-double"></div>

                                <p>
                                    Currently using
                                    <b>36% of your storage space</b>.
                                </p>
                            </div>

 开始隐藏

 

点击按钮弹出 

 function Modify(id) {
            var grid_selector = "#grid-table";
            var model = jQuery(grid_selector).jqGrid('getRowData', id);
            //alert(model.id);
            $("#form-field-1").val(model.name);
            var dialog = $("#dialog-message").removeClass('hide').dialog({
                modal: true,
                height: 330,width:500 ,
                title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
                title_html: true,
                buttons: [
                    {
                        text: "Cancel",
                        "class": "btn btn-xs",
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "OK",
                        "class": "btn btn-primary btn-xs",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }

 注意这里 title设置的是 html所有要重写jqueryui的 title

    $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
            _title: function (title) {
                var $title = this.options.title || ' '
                if (("title_html" in this.options) && this.options.title_html == true)
                    title.html($title);
                else title.text($title);
            }
        }));