Hộp thoại jquery UI: làm thế nào để khởi tạo mà không có thanh tiêu đề?

Có thể mở Hộp thoại UI UI mà không cần thanh tiêu đề không?

Tôi nghĩ rằng giải pháp tốt nhất là sử dụng tùy chọn dialogClass.

Một trích xuất từ ​​tài liệu UI jquery:

trong lúc khởi động: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

hoặc nếu bạn muốn sau init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Vì vậy, tôi đã tạo một số hộp thoại với tùy chọn hộp thoạiClass = 'noTitleStuff' và css như thế:

.noTitleStuff .ui-dialog-titlebar {display:none}

quá đơn giản !! nhưng tôi đã mất 1 ngày để suy nghĩ tại sao phương pháp khoan id-> lớp trước của tôi không hoạt động. Trong thực tế khi bạn gọi .dialog()phương thức, div bạn biến đổi trở thành con của một div khác (div hộp thoại thực) và có thể là 'anh em' của titlebardiv, vì vậy rất khó để thử tìm cái sau bắt đầu từ trước.

Tôi đã tìm ra một sửa chữa để tự động loại bỏ thanh tiêu đề.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Điều này sẽ loại bỏ tất cả các thành phần với lớp 'ui-hộp thoại-titlebar' sau khi hộp thoại được hiển thị.

Tôi tin rằng bạn có thể ẩn nó bằng CSS:

.ui-dialog-titlebar {
    display: none;
}

Ngoài ra, bạn có thể áp dụng điều này cho các hộp thoại cụ thể với dialogClasstùy chọn:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Kiểm tra "Chủ đề " của hộp thoại. Gợi ý trên sử dụng dialogClasstùy chọn, dường như đang trên đường ra để ủng hộ một phương pháp mới.

Tôi sử dụng điều này trong các dự án của tôi

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Điều này làm việc cho tôi:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Hãy thử sử dụng

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Điều này sẽ ẩn tất cả các tiêu đề hộp thoại

$(".ui-dialog-titlebar").hide();

Trên thực tế, có một cách khác để làm điều đó, bằng cách sử dụng hộp thoại widgettrực tiếp:

Do đó, bạn có thể nhận được Hộp thoại Dialog

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

và sau đó làm

$dlgWidget.find(".ui-dialog-titlebar").hide();

chỉ ẩn titlebartrong hộp thoại đó

và trong một dòng mã (tôi thích xâu chuỗi):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Không cần thêm một lớp bổ sung vào hộp thoại theo cách này, chỉ cần truy cập trực tiếp vào nó. Hoạt động tốt cho tôi.

Tôi thấy hiệu quả hơn và dễ đọc hơn khi sử dụng sự kiện mở và ẩn thanh tiêu đề từ đó. Tôi không thích sử dụng tìm kiếm tên lớp toàn cầu.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Đơn giản.

Bạn có thể sử dụng jquery để ẩn thanh tiêu đề sau khi sử dụng hộp thoạiClass khi khởi tạo hộp thoại.

trong lúc khởi động:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Bằng cách sử dụng phương pháp này, bạn không cần thay đổi tệp css của mình và đây cũng là động.

Tôi thích ghi đè các widget jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Vì vậy, bây giờ bạn có thể thiết lập nếu bạn muốn hiển thị thanh tiêu đề hay không

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Nếu bạn có nhiều hộp thoại, bạn có thể sử dụng:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Đây là cách dễ nhất để làm điều đó và nó sẽ chỉ loại bỏ thanh tiêu đề trong một hộp thoại cụ thể đó;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

Một điều tôi phát hiện ra khi ẩn thanh tiêu đề Dialog là, ngay cả khi không hiển thị, trình đọc màn hình vẫn chọn nó và sẽ đọc nó. Nếu bạn đã thêm thanh tiêu đề của riêng mình, nó sẽ đọc cả hai, gây nhầm lẫn.

Những gì tôi đã làm đã được gỡ bỏ nó khỏi DOM bằng cách sử dụng $(selector).remove(). Bây giờ trình đọc màn hình (và mọi người khác) sẽ không nhìn thấy vì nó không còn tồn tại.

Thử cái này

$("#ui-dialog-title-divid").parent().hide();

thay thế dividbằng tương ứngid

Hình thức tiếp theo này đã khắc phục tôi vấn đề.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

Tôi nghĩ rằng cách làm sạch nhất sẽ là tạo một tiện ích myDialog mới, bao gồm tiện ích hộp thoại trừ mã vạch tiêu đề. Mã vạch tiêu đề trông thật đơn giản.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Điều này làm việc cho tôi để ẩn thanh tiêu đề hộp thoại:

$(".ui-dialog-titlebar" ).css("display", "none" );

Đây là cách nó có thể được thực hiện.

Chuyển đến thư mục chủ đề -> cơ sở -> mở jquery.ui.dialog.css

Tìm thấy

Theo dõi

nếu bạn không muốn hiển thị titleBar thì chỉ cần đặt hiển thị: không như tôi đã làm trong phần sau.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samelyly cho tiêu đề là tốt.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Bây giờ đến nút đóng, bạn cũng có thể đặt nó không hoặc bạn có thể đặt nút này

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Tôi đã tìm kiếm rất nhiều nhưng không có gì sau đó tôi có ý tưởng này trong đầu. Tuy nhiên, điều này sẽ ảnh hưởng đến toàn bộ ứng dụng không có nút đóng, thanh tiêu đề cho hộp thoại nhưng bạn cũng có thể khắc phục điều này bằng cách sử dụng jquery và thêm và đặt css qua jquery

đây là cú pháp cho cái này

$(".specificclass").css({display:normal})

Đối với tôi, tôi vẫn muốn sử dụng các góc có thể thay đổi kích thước, chỉ là tôi không muốn nhìn thấy các đường chéo. Tôi đã sử dụng

$(".ui-resizable-handle").css("opacity","0");

Chỉ cần nhận ra tôi đã bình luận về câu hỏi sai. Sống theo tên của tôi :(

Bạn đã thử giải pháp từ các tài liệu UI của jQuery chưa? https://api.jqueryui.com/dialog/#method-open

Như nó nói bạn có thể làm như thế này ...

Trong CSS:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

Trong JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Bạn có thể xóa thanh có biểu tượng đóng với các công nghệ được mô tả ở trên và sau đó tự thêm biểu tượng đóng.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// nối div này vào div giữ nội dung của bạn

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

đi đến jquery-ui.js của bạn (trong trường hợp của tôi là jquery-ui-1.10.3.custom.js) và tìm kiếm cái này._createTitlebar (); và bình luận nó.

bây giờ bất cứ ai trong hộp thoại của bạn sẽ xuất hiện với các tiêu đề. Nếu bạn muốn tùy chỉnh tiêu đề, chỉ cần truy cập _createTitlebar (); và chỉnh sửa mã bên trong.

bởi