dialog jquery UI: bagaimana cara menginisialisasi tanpa bilah judul?

254

Apakah mungkin untuk membuka Dialog UI jQuery tanpa bilah judul?

Loony2nz
sumber

Jawaban:

289

Saya pikir solusi terbaik adalah dengan menggunakan opsi dialogClass.

Ekstrak dari jquery UI docs:

selama init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

atau jika Anda ingin setelah init. :

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

Jadi saya membuat beberapa dialog dengan opsi dialogClass = 'noTitleStuff' dan css seperti itu:

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

terlalu sederhana !! tapi saya butuh 1 hari untuk memikirkan mengapa metode pengeboran kelas id saya sebelumnya tidak berfungsi. Bahkan ketika Anda memanggil .dialog()metode div yang Anda ubah menjadi anak dari div lain (dialog dialog yang sebenarnya) dan mungkin 'saudara' dari titlebardiv, jadi sangat sulit untuk mencoba menemukan yang terakhir mulai dari yang sebelumnya.

mizar
sumber
2
+1 Solusi Jonatan tidak berfungsi untuk dialog tertentu. Anda punya.
cetnar
1
Saya setuju dengan mizar. Ini adalah solusi terbaik karena fakta bahwa ini memungkinkan Anda untuk spesifik ke kotak dialog yang hanya memiliki kelas yang Anda tetapkan.
Carlos Pinto
2
satu-satunya downside dari metode ini adalah bahwa Chrome menambahkan bilah gulir vertikal untuk dialog seperti itu ketika dikonfigurasi sebagai modal, karena entah bagaimana jQuery mulai salah menghitung tinggi ui-widget-overlay ... saya tidak menggali lebih dalam, dan tidak dapat menemukan perbaikan cepat selain dari hacky {overflow: hidden}
dimsuz
1
dialogClass tidak digunakan lagi dalam jquery v 1.12 dan tidak memengaruhi objek dialog seperti yang dimaksud.
Mini Kulkas
1
Opsi dialogClass telah ditinggalkan demi opsi kelas, menggunakan properti ui-dialog.
Sandeep Saroha
96

Saya menemukan perbaikan untuk menghapus bilah judul secara dinamis.

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

Ini akan menghapus semua elemen dengan kelas 'ui-dialog-titlebar' setelah kotak dialog diberikan.

Loony2nz
sumber
3
... dan opsi css menghapus kemungkinan mereka muncul sebelumnya. Saya tidak yakin saya melihat manfaat dari alternatif Anda. Pada kenyataannya, alternatif Anda akan melakukan apa yang saya lakukan, hanya menambahkan langkah ekstra. Pergi dengan CSS-Route akan lebih cepat.
Sampson
10
Yah pilihan saya hanya akan menghapus bilah judul untuk dialog yang satu ini. Jika saya menggunakan opsi Anda, saya akan menghapus bilah judul untuk semua dialog saya. Saya dapat melihat di masa depan bahwa saya akan memerlukan judul bar.
Loony2nz
2
Jadi Anda termasuk elemen Anda dalam css-aturan: #example .ui-dialog-titlebar.... Bagaimanapun juga itu akan berhasil; tetapi Javascript akan mengatur css pada akhirnya, jadi saya tidak melihat manfaat dari tidak melakukannya di css untuk memulai. Itu benar-benar tidak membuat banyak perbedaan - apa pun yang Anda paling nyaman dengan :)
Sampson
2
Apakah hanya saya atau apakah #example tidak memiliki cakupan di atas judul dialog?
Rio
2
@Rice Flour Cookies: .hide () harus muncul setelah .dialog () karena .dialog () adalah apa yang menyuntikkan markup untuk dialog ke halaman. Sebelum panggilan itu, halaman belum memiliki elemen dialog.
Jeremy Wiebe
62

Saya yakin Anda bisa menyembunyikannya dengan CSS:

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

Atau, Anda dapat menerapkan ini pada dialog tertentu dengan dialogClassopsi:

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

Periksa " Theming " Dialog. Saran di atas memanfaatkan dialogClassopsi, yang tampaknya ada di jalan keluar yang mendukung metode baru.

Sampson
sumber
Ya saya kira itu akan berhasil, tapi itu opsi global. Saya bertanya-tanya apakah ada cara untuk melakukannya dengan opsi. Saya kira saya dapat melakukan beberapa rendering jquery'ness pra untuk menghapus div judul sebelum ditampilkan
Loony2nz
2
Tidak. Saya tidak percaya ada opsi untuk menghapusnya. Secara default itu adalah tombol tutup, jadi dalam arti itu hampir-desain buruk.
Sampson
3
Ketika orang berbicara tentang css terlalu banyak, mereka mengeja-lucu, kan
bobobobo
Juga Anda mungkin tidak boleh menghapusnya karena Anda tidak dapat memindahkan dialog lagi setelah itu. Mungkin lebih baik untuk tidak memasukkan teks di dalamnya dan mengubah gaya jadi gelap dan tipis
bobobobo
Jika Anda memiliki beberapa acara lain yang memicu metode tutup dialog, maka ada beberapa kasus di mana Anda tidak memerlukan tombol tutup pada bilah judul.
Carlos Pinto
55

Saya menggunakan ini dalam proyek saya

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
Amirouche Douda
sumber
7
Bahkan lebih baik: hapus bilah judul tetapi bukan tombol tutup. Jaga fungsinya. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
Adrian P.
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();adalah jawaban terbaik menurut pendapat saya +1 untuk baris kode ini
Jaylen
Atau Anda bisa mencari saudara sebelumnya, yang merupakan bilah judul: .ui-dialog-titlebar: $("#myDialog").prev().hide()atau $("#myDialog").prev(".ui-dialog-titlebar").hide().
Andrew
Terpilih karena saya memiliki dua div, dan saya ingin menyembunyikan satu saja.
Marcus Becker
15

Ini bekerja untuk saya:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
sumber
1
Ini akan menyembunyikan tajuk di semua dialog. Saran saya di bawah (balasan berikutnya) akan melakukannya hanya untuk dialog yang sedang dibuka.
ingredient_15939
Bagus ... Ini berarti saya tidak perlu membuat setiap dialog disembunyikan karena kelas css dasar ... juga berarti saya tidak perlu mengatur dialog saya secara terpisah dan kemudian menghapus judul.
Gwasshoppa
8

Coba gunakan

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

Ini akan menyembunyikan semua judul dialog

$(".ui-dialog-titlebar").hide();
Firas Abd Alrahman
sumber
7

Sebenarnya masih ada cara lain untuk melakukannya, menggunakan dialog widgetlangsung:

Anda bisa mendapatkan Widget Dialog demikian

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

dan kemudian lakukan

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

untuk menyembunyikan titlebardialog itu saja

dan dalam satu baris kode (saya suka chaining):

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

Tidak perlu menambahkan kelas tambahan ke dialog dengan cara ini, langsung saja lakukan. Bekerja dengan baik untuk saya.

odedbd
sumber
5

Saya merasa lebih efisien, dan lebih mudah dibaca, untuk menggunakan acara terbuka , dan menyembunyikan bilah judul dari sana. Saya tidak suka menggunakan pencarian nama kelas global-halaman.

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

Sederhana.

bahan_15939
sumber
2
Ini adalah metode yang saya gunakan tetapi menggunakan fungsi create: sehingga selalu tersembunyi, tidak hanya ketika dialog ditampilkan. Saya juga mengubahnya menjadi .remove () alih-alih .hide () untuk memastikan bahwa dialog sudah hilang sepenuhnya.
Chris Porter
4

Anda dapat menggunakan jquery untuk menyembunyikan bilah judul setelah menggunakan dialogClass saat menginisialisasi dialog.

selama init:

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

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

Dengan menggunakan metode ini, Anda tidak perlu mengubah file css Anda, dan ini juga dinamis.

Arun Vasudevan Nair
sumber
1
Ya, ini adalah solusi mizar - diposting 6 bulan sebelum Anda.
Kirk Woll
Saya setuju, tetapi kemudian Anda harus menambahkan entri CSS yang juga mempersulit solusi. Saran saya mengatasi masalah hanya menggunakan jQuery.
Arun Vasudevan Nair
4

Saya suka mengganti 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);

Jadi sekarang Anda dapat mengatur apakah Anda ingin menampilkan bilah judul atau tidak

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

Jika Anda memiliki banyak dialog, Anda dapat menggunakan ini:

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

Ini adalah cara termudah untuk melakukannya dan itu hanya akan menghapus batang judul dalam satu dialog tertentu;

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

Satu hal yang saya temukan ketika menyembunyikan bilah judul Dialog adalah bahwa, meskipun tampilan tidak ada, pembaca layar masih mengambilnya dan akan membacanya. Jika Anda sudah menambahkan bilah judul Anda sendiri, itu akan membaca keduanya, menyebabkan kebingungan.

Apa yang saya lakukan dihapus dari menggunakan DOM $(selector).remove(). Sekarang pembaca layar (dan semua orang lain) tidak akan melihatnya karena sudah tidak ada.

pengguna616258
sumber
2

Coba ini

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

ganti dividdengan yang sesuaiid

abdulkaderjeelani
sumber
2

Bentuk selanjutnya ini memperbaiki saya.

$('#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>

jcromeros1987
sumber
1

Ini berhasil bagi saya untuk menyembunyikan bilah judul kotak dialog:

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

Inilah yang bisa dilakukan.

Buka folder tema -> basis -> buka jquery.ui.dialog.css

Temukan

Berikut ini

jika Anda tidak ingin menampilkan titleBar maka cukup atur display: tidak seperti yang saya lakukan di berikut ini.

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

Samil untuk judul juga.

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

Sekarang, tutup tombol Anda juga dapat mengaturnya tidak ada atau Anda dapat mengaturnya

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

}

Saya melakukan banyak pencarian tetapi tidak ada yang muncul di pikiran saya. Namun ini akan memengaruhi seluruh aplikasi untuk tidak memiliki tombol tutup, bilah judul untuk dialog, tetapi Anda juga dapat mengatasinya dengan menggunakan jquery dan menambahkan serta mengatur css melalui jquery

di sini adalah sintaks untuk ini

$(".specificclass").css({display:normal})
ProgrammingNinja
sumber
1
Ini berfungsi dan sangat membantu untuk memahami bahwa ini dapat dilakukan, tetapi jika Anda memiliki beberapa .dialogs()dan hanya 1 atau lebih yang memerlukan pengaturan ini, maka ada rute alternatif daripada menerapkan pengaturan secara global dengan cara ini.
Chef_Code
0

Bagi saya, saya masih ingin menggunakan sudut yang cukup besar, hanya saja tidak ingin jadi melihat garis diagonal. Saya menggunakan

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

Baru sadar saya mengomentari pertanyaan yang salah. Hidup sesuai dengan nama saya :(

controlZ
sumber
0

Sudahkah Anda mencoba solusi dari jQuery UI docs? https://api.jqueryui.com/dialog/#method-open

Seperti dikatakan Anda dapat melakukan seperti ini ...

Dalam CSS:

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

Di JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});
Олег Всильдеревьев
sumber
-1

Anda dapat menghapus bilah dengan ikon tutup dengan teknik yang dijelaskan di atas dan kemudian menambahkan ikon tutup sendiri.

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

// tambahkan div ini ke div yang menyimpan konten Anda

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });
Yakub
sumber
-1

buka jquery-ui.js Anda (dalam kasus saya jquery-ui-1.10.3.custom.js) dan cari this._createTitlebar (); dan berkomentar.

sekarang siapa pun dialog Anda akan muncul dengan tajuk. Jika Anda ingin mengkustomisasi header, buka _createTitlebar (); dan edit kode di dalamnya.

oleh

pengguna2575051
sumber
Membuat modifikasi seperti itu menyebabkan peningkatan rasa sakit yang mengerikan.
usr