Dialog UI jQuery - ikon tutup yang hilang


188

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: Cuplikan layar dari ikon tutup yang hilang

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.


1
Sudahkah Anda memeriksa apakah file gambar untuk ikon ada di sistem file Anda?
Tiquelou

Ya, lembar gambar ikon ada dan berada di lokasi yang benar.
Xion Dark

Jawaban:


443

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.


7
Ini memperbaiki masalah saya. Saya menyertakan sumber daya dalam urutan ini: 1) JQuery core 2) bootstrap 3) JQueryUI. Terima kasih atas bantuan Anda; lebih baik terlambat daripada tidak sama sekali! PS - Anda benar-benar meniup pikiran saya.
Xion Dark

6
Bahkan kemudian ... Bisakah Anda menjelaskan MENGAPA pemesanan bootstrap ada hubungannya dengan itu?
AndyC

4
Jika Anda menukar pesanan Bootstrap datang sebelum Jquery UI maka Bootstrap tooltips tidak akan berfungsi.
vee

4
Meskipun ini sebenarnya bukan solusi yang baik, saya memutarnya karena memberikan cara cepat untuk memverifikasi bahwa ini adalah masalahnya. Saya pribadi akan menggunakan solusi Raul Riveros pada akhirnya karena hanya menukar dua skrip menyebabkan banyak masalah lain yang lebih besar. BTW, aku agak bingung ketika melihatnya.
krowe

18
Jika Anda tidak ingin mengubah urutan Bootstrap dan jQuery UI, Anda juga dapat memperbaiki tombol: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer

45

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 adalah cara yang cukup apik dalam melakukan sesuatu tanpa mengganggu banyak panggilan. +1 untuk hal yang sama.
Aalok Mishra

mengganggu kelas Button
Stefano Mtangoo

1
Masalah dengan solusi ini adalah ini akan memecah kode di mana Anda ingin menggunakan fungsi tombol bootstrap, seperti tombol ('memuat'). Untuk memastikan bahwa fungsi tombol bootstrap yang ada masih berfungsi, ganti semua referensi panggilan fungsi "tombol ()" bootstrap dengan "bootstrapBtn ()". (Ya, saya tahu komentar kode semacam ini menyiratkan ini, tetapi saya pikir itu layak secara eksplisit mengatakannya.)
Kornél Regius

Tidakkah editor Anda mengeluh tentang kehilangan titik koma?
R. Schreurs

22

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

8
FYI untuk pembaca di masa mendatang, Anda dapat memperluas ui.dialog (tautan) sehingga Anda tidak perlu menduplikasi fungsi terbuka ini di setiap panggilan.
John MacIntyre

2
Ini bekerja dengan cukup baik. X sedikit lebih jauh dari biasanya ... ... tidak yakin persis mengapa.
ashlar64

Solusi bagus! Namun dalam kasus saya, removeClass (...) tidak diperlukan dan menyebabkan tombol X salah tempat di sebelah kiri jendela dialog. Cukup dengan merantai metode html () ke metode find () berhasil. Terima kasih.
Aamir

16

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 menggunakan 1.10.3 tapi setidaknya saya merasa kurang gila sekarang. Saya memilih untuk mengabaikannya untuk saat ini. Terima kasih.
Xion Dark

Saya dapat mengkonfirmasi ini masih menjadi masalah di 1.10.3
Frug

Masih sama di 1.10.4
Dbloch

Masalah yang sama di 1.12.1
TetraDev

15

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

Sangat bagus! Jika Anda tidak menginstal file gambar atau tema tertentu, Anda bisa mendapatkannya di sini: jqueryui.com/themeroller . Unduh tema dan pilih komponen yang Anda butuhkan (dalam hal ini, dialog). Kemudian unduh, ekstrak, buka tema atau folder gambar dan salin file gambar yang cocok dengan tema Anda ke dalam proyek Anda. Kemudian ubah referensi dalam css yang disediakan oleh Yauheni dalam jawabannya.
Exel Gamboa

Poin Anda 3 memecahkan masalah bagi saya. Saya hanya perlu melakukan sedikit penyesuaian pada lebar, tinggi dan posisi latar belakang untuk membuat tombol terlihat seperti yang saya inginkan. Terima kasih.
Vimalan Jaya Ganesh

9

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


3
Sebenarnya ini adalah respons yang memecahkan masalah bagi saya, atau setidaknya menjelaskannya. Saya mempunyai halaman pengujian yang mereferensikan salinan jquery-ui.css online (yaitu, code.jquery.com / ... ) dan dalam kasus itu "X" muncul. Namun di halaman proyek saya yang sebenarnya, yang memiliki file .css di folder css lokal, "X" tidak muncul. Menyalin folder "gambar" ke folder css lokal saya, di samping file .css saya, memperbaiki masalah ini.
Dave Marley

5

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

3

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!


3

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.


1

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


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

}


1

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>

1

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.


0

Cukup tambahkan yang hilang:

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

3
Saya tidak bisa. Saya tidak membuat bagian html itu, jquery melakukannya. Saya menambahkan lebih banyak informasi ke pertanyaan saya untuk memperjelas hal ini.
Xion Dark

0

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

Dari Pengembang Web menunjukkan kode yang dibuat jquery

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.


0

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;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.