Hộp thoại UI UI - thiếu biểu tượng đóng

Tôi đang sử dụng một chủ đề jQuery 1.10.3 tùy chỉnh. Tôi đã tải xuống mọi thứ trực tiếp từ con lăn chủ đề và tôi đã cố tình không thay đổi bất cứ điều gì.

Tôi tạo một hộp thoại và tôi nhận được một hình vuông màu xám trống trong đó biểu tượng đóng sẽ là:

Tôi đã so sánh mã được tạo trên trang của mình:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

đến mã được tạo trên trang Dialog Demo :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

EDIT: Các phần khác nhau của mã được tạo bởi jQueryUI, không phải tôi vì vậy tôi không thể thêm các thẻ span mà không chỉnh sửa tệp jqueryui js có vẻ như là một lựa chọn xấu / không cần thiết để đạt được chức năng bình thường.

Đây là javascript được sử dụng để tạo ra một phần của mã:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Tôi đang bị thua lỗ và cần sự giúp đỡ. Cảm ơn trước.

Tôi đến muộn một lúc, nhưng tôi sẽ làm bạn suy nghĩ, sẵn sàng chưa?

Lý do điều này xảy ra, là bởi vì bạn đang gọi bootstrap, sau khi bạn gọi jquery-ui.

Theo nghĩa đen, trao đổi hai để thay vì:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

no trở nên

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Chỉnh sửa - 26/06/2015 - điều này tiếp tục thu hút sự quan tâm hàng tháng sau đó vì vậy tôi nghĩ rằng nó đáng để chỉnh sửa. Tôi thực sự thực sự thích giải pháp noConflict được cung cấp trong bình luận bên dưới câu trả lời này và được người dùng Pretty Cool làm rõ như một câu trả lời riêng biệt. Như một số đã báo cáo các vấn đề với tooltip bootstrap khi các tập lệnh được hoán đổi. Tôi đã không gặp phải vấn đề đó tuy nhiên vì tôi đã tải xuống giao diện người dùng jquery mà không có tooltip vì tôi không cần nó vì bootstrap. Vì vậy, vấn đề này không bao giờ đến với tôi.

Chỉnh sửa - 22/07/2015 - Đừng nhầm lẫn jquery-uivới jquery! Mặc dù JavaScript của Bootstrap yêu cầu jQuery được tải trước đó, nhưng nó không phụ thuộc vào jQuery-UI. Vì vậy, jquery-ui.jscó thể được tải sau bootstrap.min.js, trong khi jquery.jsluôn cần phải được tải trước Bootstrap.

Đây là một nhận xét về câu trả lời hàng đầu, nhưng tôi cảm thấy nó đáng để trả lời vì nó đã giúp tôi trả lời vấn đề.

Nếu bạn muốn giữ Bootstrap được khai báo sau JQuery UI (tôi đã làm vì tôi muốn sử dụng công cụ Bootstrap), việc khai báo sau (tôi đã khai báo sau $(document).ready) sẽ cho phép nút xuất hiện lại (trả lời từ https://stackoverflow.com/ a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Đây dường như là một lỗi trong cách jQuery vận chuyển. Bạn có thể sửa nó bằng tay với một số thao tác dom trong Dialog Opensự kiện:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

Điều này được báo cáo là bị hỏng trong 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip vào ngày 29 tháng 1 năm 2013 lúc 7:36 sáng cho biết: Trong các phiên bản CDN, nút đóng hộp thoại bị thiếu. Chỉ có thẻ nút, biểu tượng span ui là missong.

Tôi đã tải xuống phiên bản trước và X cho nút đóng hiển thị sao lưu.

Tôi tìm thấy ba bản sửa lỗi:

1. Bạn chỉ có thể tải bootrap trước. Và họ tải jquery-ui. Nhưng nó không phải là ý tưởng tốt. Bởi vì bạn sẽ thấy lỗi trong giao diện điều khiển.

2. Điều này:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;

   giúp. Nhưng các nút khác trông khủng khiếp. Và bây giờ chúng ta không có nút bootstrap.

3. Tôi chỉ muốn sử dụng kiểu bootrap và tôi cũng muốn có nút đóng với một biểu tượng. Tôi đã thực hiện như sau:

   Nút đóng trông như thế nào sau khi sửa

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }

Tôi có cùng một vấn đề chính xác, Có thể bạn đã kiểm tra vấn đề này nhưng đã giải quyết nó chỉ bằng cách đặt thư mục "hình ảnh" ở cùng vị trí với jquery-ui.css

Tôi đã bị mắc kẹt với cùng một vấn đề và sau khi đọc và thử tất cả các đề xuất ở trên, tôi chỉ cố gắng thay thế thủ công hình ảnh này (mà bạn có thể tìm thấy nó ở đây ) trong CSS sau khi tải xuống và lưu trong thư mục hình ảnh trên ứng dụng của tôi và voilá, Vấn đề được giải quyết!

đây là CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

Tôi đang sử dụng jQuery UI 1.8.17 và tôi cũng gặp vấn đề tương tự, cộng với tôi có thêm các bảng định kiểu css đang được áp dụng cho những thứ trên trang, bao gồm cả màu thanh tiêu đề. Vì vậy, để tránh mọi vấn đề khác, tôi đã nhắm mục tiêu các yếu tố ui chính xác bằng cách sử dụng mã dưới đây:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Sau đó, tôi đã thêm một nút đóng trong các thuộc tính của chính hộp thoại: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Vì một số lý do, tôi đã phải nhắm mục tiêu cả hai mục, nhưng nó hoạt động!

Tôi biết câu hỏi này đã cũ nhưng tôi chỉ gặp vấn đề này với jquery-ui v1.12.0.

Trả lời ngắn Hãy chắc chắn rằng bạn có một thư mục được gọi Imagesở cùng nơi bạn có jquery-ui.min.css. Thư mục hình ảnh phải chứa các hình ảnh được tìm thấy với bản tải xuống mới của jquery-ui

Câu trả lời dài

Vấn đề của tôi là tôi đang sử dụng gulp để hợp nhất tất cả các tệp css của tôi vào một tệp duy nhất. Khi tôi làm điều đó, tôi đang thay đổi vị trí của jquery-ui.min.css. Mã css cho hộp thoại mong đợi một thư mục được gọi Imagestrong cùng thư mục và bên trong thư mục này, nó mong đợi các biểu tượng mặc định. Vì gulp không sao chép hình ảnh vào đích mới nên nó không hiển thị biểu tượng x.

Để tham khảo, đây là cách tôi mở rộng phương thức mở theo đề xuất của @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Nếu bạn đang gọi hộp thoại () bên trong hàm js, bạn có thể sử dụng mã xung đột nút bootstrap bên dưới

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

Một người đàn ông khôn ngoan đã từng giúp tôi.

Trong thư mục jquery-ui.cssđược đặt, tạo thư mục có tên "hình ảnh" và sao chép các tệp bên dưới vào đó:

ui-icon_444444_256x240.png

ui-icon_555555_256x240.png

ui-icon_777620_256x240.png

ui-icon_777777_256x240.png

ui-icon_cc0000_256x240.png

ui-icon_ffffff_256x240.png

và biểu tượng đóng xuất hiện.

Chỉ cần thêm vào phần còn thiếu:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

Tôi đang có vấn đề này là tốt. Đây là đoạn mã được chèn cho nút đóng:

Khi tôi tắt kiểu = "display: none:" trên nút, thì nút đóng xuất hiện. Vì vậy, vì một số lý do mà hiển thị: không có; đang được thiết lập và tôi không thấy cách kiểm soát điều đó. Vì vậy, một cách khác để giải quyết vấn đề này có thể chỉ đơn giản là ghi đè lên màn hình: không có. Đừng xem làm thế nào để làm điều đó mặc dù.

Tôi lưu ý rằng câu trả lời được đăng bởi KyleMit không hoạt động, nhưng tạo một nút X trông khác.

Tôi cũng lưu ý rằng vấn đề này không ảnh hưởng đến tất cả các hộp thoại trên các trang của tôi, mà chỉ một số trong số chúng. Một số hộp thoại hoạt động như mong đợi; khác không có tiêu đề (nghĩa là khoảng chứa tiêu đề trống) trong khi nút đóng có mặt.

Tôi nghĩ rằng một cái gì đó là sai nghiêm trọng và nó có thể không phải là thời gian cho 1.10.x.

Nhưng sau khi tiếp tục làm việc, tôi phát hiện ra rằng trong một số trường hợp, các tiêu đề không được đặt đúng, và sau khi sửa nó, nút đóng X lại xuất hiện như mong muốn.

Tôi đã từng đặt tiêu đề như thế này:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Id đó không tồn tại trong mã của tôi, nhưng được tạo ra rõ ràng bởi jquery từ ac-popup và ui-hộp-title. Một loại bùn. Nhưng như tôi đã nói rằng không còn hoạt động nữa, và tôi phải sử dụng như sau:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

Sau khi làm điều đó, vấn đề nút thiếu có vẻ tốt hơn, mặc dù tôi không chắc liệu chúng có liên quan chắc chắn không.

Ngay cả khi tải bootstrap sau jquery-ui, tôi đã có thể sửa bằng cách này:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}