Dialog UI jQuery - ikon tutup yang hilang

Saya menggunakan tema jQuery 1.10.3 khusus. Saya mengunduh setiap langsung dari rol tema dan saya sengaja tidak mengubah apa pun.

Saya membuat kotak dialog dan saya mendapatkan kotak abu-abu kosong di mana ikon tutup seharusnya:

Saya membandingkan kode yang dihasilkan di halaman saya:

<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>

ke kode yang dihasilkan pada halaman Demo Dialog :

<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: Bagian-bagian berbeda dari kode dihasilkan oleh jQueryUI, bukan saya jadi saya tidak bisa hanya menambahkan tag rentang tanpa mengedit file js jqueryui yang tampaknya seperti pilihan yang buruk / tidak perlu untuk mencapai fungsi normal.

Berikut adalah javascript yang digunakan yang menghasilkan bagian dari kode:

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);
        }
    }
});

Saya bingung dan butuh bantuan. Terima kasih sebelumnya.

Saya terlambat ke yang ini sebentar, tapi saya akan meledakkan pikiran Anda, siap?

Alasan ini terjadi, adalah karena Anda memanggil bootstrap, setelah Anda memanggil jquery-ui.

Secara harfiah, tukar keduanya sehingga alih-alih:

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

menjadi

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

:)

Sunting - 26/06/2015 - ini terus menarik minat berbulan-bulan kemudian jadi saya pikir itu layak diedit. Saya sebenarnya sangat menyukai solusi noConflict yang ditawarkan dalam komentar di bawah jawaban ini dan diklarifikasi oleh pengguna Pretty Cool sebagai jawaban terpisah. Seperti beberapa telah melaporkan masalah dengan tooltip bootstrap ketika skrip ditukar. Saya tidak mengalami masalah itu karena saya mengunduh jquery UI tanpa tooltip karena saya tidak memerlukannya karena bootstrap. Jadi masalah ini tidak pernah muncul untuk saya.

Sunting - 22/07/2015 - Jangan bingung jquery-uidengan jquery! Sementara JavaScript Bootstrap membutuhkan jQuery untuk dimuat sebelumnya, itu tidak bergantung pada jQuery-UI. Jadi jquery-ui.jsbisa di-load setelah bootstrap.min.js, sementara jquery.jsselalu harus di-load sebelum Bootstrap.

Ini adalah komentar pada jawaban teratas, tetapi saya merasa itu layak untuk dijawab sendiri karena membantu saya menjawab masalah.

Jika Anda ingin agar Bootstrap tetap dideklarasikan setelah JQuery UI (saya lakukan karena saya ingin menggunakan tooltip Bootstrap), mendeklarasikan yang berikut (saya menyatakannya setelah $(document).ready) akan memungkinkan tombol untuk muncul lagi (menjawab dari 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

Ini tampaknya merupakan bug dalam cara kapal jQuery. Anda dapat memperbaikinya secara manual dengan beberapa manipulasi dom pada Dialog Openacara:

$("#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>");
    }
});

Ini dilaporkan rusak di 1.10

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

phillip pada 29 Januari 2013 jam 7:36 berkata: Dalam versi CDN, tombol tutup dialog tidak ada. Hanya ada tag tombol, span ui-icon adalah missong.

Saya mengunduh versi sebelumnya dan X untuk tombol tutup muncul kembali.

Saya menemukan tiga perbaikan:

1. Anda bisa memuat bootsrap terlebih dahulu. Dan mereka memuat jquery-ui. Tapi itu bukan ide yang bagus. Karena Anda akan melihat kesalahan di konsol.

2. Ini:

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

   membantu. Tapi tombol lain terlihat mengerikan. Dan sekarang kita tidak memiliki tombol bootstrap.

3. Saya hanya ingin menggunakan gaya bootsrap dan saya juga ingin memiliki tombol tutup dengan ikon. Saya sudah melakukan berikut:

   Tombol seberapa dekat terlihat setelah diperbaiki

   .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;
   }

Saya memiliki masalah yang sama persis, Mungkin Anda sudah memeriksa ini tetapi menyelesaikannya hanya dengan menempatkan folder "gambar" di lokasi yang sama dengan jquery-ui.css

Saya terjebak dengan masalah yang sama dan setelah membaca dan mencoba semua saran di atas, saya hanya mencoba untuk mengganti secara manual gambar ini (yang dapat Anda temukan di sini ) di CSS setelah mengunduhnya dan disimpan di folder gambar pada aplikasi dan voilá saya, masalah terpecahkan!

di sini adalah CSS:

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

Saya menggunakan jQuery UI 1.8.17 dan saya memiliki masalah yang sama, ditambah lagi saya memiliki stylesheet css tambahan yang diterapkan pada hal-hal pada halaman, termasuk warna batang judul. Jadi untuk menghindari masalah lain, saya menargetkan elemen ui yang tepat menggunakan kode di bawah ini:

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

Kemudian saya menambahkan tombol tutup di properti dialog itu sendiri: ...

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

Untuk beberapa alasan saya harus menargetkan kedua item, tetapi berhasil!

Saya tahu pertanyaan ini sudah lama tetapi saya baru saja mengalami masalah dengan jquery-ui v1.12.0.

Jawaban Singkat Pastikan Anda memiliki folder yang dipanggil Imagesdi tempat yang sama dengan yang Anda miliki jquery-ui.min.css. Folder gambar harus berisi gambar-gambar yang ditemukan dengan unduhan baru jquery-ui

Jawaban panjang

Masalah saya adalah saya menggunakan tegukan untuk menggabungkan semua file css saya menjadi satu file. Ketika saya melakukan itu, saya mengubah lokasi jquery-ui.min.css. Kode css untuk dialog mengharapkan folder yang disebut Imagesdi direktori yang sama dan di dalam folder ini mengharapkan ikon default. karena tegukan tidak menyalin gambar ke tujuan baru itu tidak menunjukkan ikon x.

Sebagai referensi, ini adalah cara saya memperluas metode terbuka sesuai saran @ 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;

}

Jika Anda memanggil dialog () di dalam fungsi js, Anda dapat menggunakan kode konflik tombol bootstrap di bawah ini

 <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>

Seorang pria bijak pernah membantu saya.

Di folder di mana jquery-ui.cssberada, buat folder bernama "gambar" dan salin file di bawah ini ke dalamnya:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

dan ikon tutup muncul.

Cukup tambahkan yang hilang:

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

Saya mengalami masalah ini juga. Berikut adalah kode yang dimasukkan untuk tombol tutup:

Ketika saya mematikan style = "display: none:" pada tombol, maka tombol tutup muncul. Jadi untuk beberapa alasan yang ditampilkan: tidak ada; semakin diatur, dan saya tidak melihat bagaimana mengendalikannya. Jadi cara lain untuk mengatasinya adalah dengan mengganti tampilan: tidak ada. Tapi saya tidak tahu bagaimana melakukannya.

Saya perhatikan bahwa jawaban yang diposting oleh KyleMit berhasil, tetapi membuat tombol X tampak berbeda.

Saya juga mencatat bahwa masalah ini tidak mempengaruhi semua dialog pada halaman saya, tetapi hanya beberapa dari mereka. Beberapa dialog berfungsi seperti yang diharapkan; lainnya tidak memiliki judul (yaitu, rentang yang berisi judul kosong) saat tombol tutup ada.

Saya berpikir ada sesuatu yang salah dan mungkin bukan waktunya untuk 1.10.x.

Tetapi setelah pekerjaan lebih lanjut, saya menemukan bahwa dalam beberapa kasus judul tidak diatur dengan benar, dan setelah memperbaikinya, tombol tutup X muncul kembali sebagaimana mestinya.

Saya biasa mengatur judul seperti ini:

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

Id itu tidak ada dalam kode saya, tetapi tampaknya dibuat oleh jquery dari ac-popup dan ui-dialog-title. Semacam kludge. Tapi seperti yang saya katakan itu tidak berfungsi lagi, dan saya harus menggunakan yang berikut sebagai gantinya:

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

Setelah melakukan itu, masalah tombol yang hilang tampaknya lebih baik, meskipun saya tidak yakin apakah itu terkait.

Bahkan memuat bootstrap setelah jquery-ui, saya dapat memperbaikinya menggunakan ini:

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