JQuery UI डायलॉग पर क्लोज़ बटन कैसे हटाएं?

Question

मैं jQuery UI द्वारा बनाए गए संवाद बॉक्स पर बंद बटन ( शीर्ष दाएं कोने में X ) को कैसे निकालूं ?

Comments

दस्तावेज़ीकरण की जाँच करें, पहला उप-शीर्षक: api.jqueryui.com/dialog

— माइक कोल

@MikeCole दस्तावेज़ीकरण 1.10 के लिए है - मुझे लगता है कि यदि आप किसी भी निचले संस्करण में बंद बटन छिपाना चाहते हैं, तो आपको नीचे दिए गए उत्तरों की तरह कुछ करने की आवश्यकता होगी।

— जराट

"यूआई-संवाद-शीर्षक-पास" का उपयोग करें: "प्रदर्शन: कोई नहीं;" जब हम

— jqueryui

Answer 1

मैंने इसे अंत में काम किया है (ध्यान दें कि तीसरी पंक्ति खुले फ़ंक्शन को ओवरराइड करती है जो बटन को ढूंढती है और इसे छुपाती है):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

सभी संवादों पर नज़दीकी बटन को छिपाने के लिए आप निम्नलिखित सीएसएस का भी उपयोग कर सकते हैं:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Comments

$(".ui-dialog-titlebar-close", ui).hide();केवल इस संवाद के लिए बटन को छिपाने के लिए ।

— एंथनी सेरड्यूकोव

मैं इसे ui पैरामीटर से काम करने के लिए नहीं मिला। मैंने समाप्त कर दिया: $ ("। Ui-डायलॉग-टाइटलबार-क्लोज़", $ (यह) .parent ())। Hide ()

— निगेल

@ एटन बस यह बताना चाहते हैं कि 'यूआई' को निर्दिष्ट करने से काम नहीं चलता। आपको 'ui.dialog' का उपयोग करना होगा। इसलिए सही लाइन $ होगी ("। ui-डायलॉग-टाइटलबार-क्लोज़", ui.dialog) .hide ();

— ब्रैडली माउंटफोर्ड

@Bradley। ui ने मेरे लिए काम नहीं किया, ui.dialog ने किया लेकिन प्रत्येक उदाहरण पर लागू किया। ओटी काम करने के लिए केवल एक ही खुले फ़ंक्शन पर लागू होता है जिसे मुझे यह करने के लिए परिभाषित किया गया है: $ (", ui-डायलॉग-टाइटलबार-क्लोज़", यह.परेंटकोड) .hide ();

— नबआब

open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }

— ओपनग्रिड

Answer 2

यहां सीएसएस का उपयोग करने का एक और विकल्प है जो पृष्ठ पर प्रत्येक संवाद की सवारी नहीं करता है।

सीएसएस

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

HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

जावास्क्रिप्ट।

$( ".selector" ).dialog({ dialogClass: 'no-close' });

काम करने का उदाहरण

Comments

मुझे यह दृष्टिकोण पसंद है क्योंकि मैं इसका उपयोग चीजों के साथ कर सकता हूं: .noTitleDlg .ui-Dial-title-titlebar {display: none} में सीएसएस बनाने के लिए जिस तरह से मैं चाहता हूं कि मेरा संवाद दिखाई दे और व्यवहार करे और फिर उसके अनुसार संवाद सेट करें।

— ए। मुर्रे

बटन को हटाने के लिए अतिरिक्त js कार्यक्षमता को शामिल नहीं करने के लिए बहुत साफ समाधान ... +1।

— बॉन्ग

महान विचार। उन परिस्थितियों में एक विशिष्ट संवाद को लक्षित करने के लिए काम आता है जहां आप सभी संवादों के लिए एक ही खुली विधि का उपयोग करते हैं, और एक विशिष्ट उदाहरण के लिए इसे बदलना बहुत व्यावहारिक नहीं है।

— ज़ोल्कट

मेरा पसंदीदा समाधान। मैं कुछ इस तरह सोच रहा था कि यह सबसे अच्छा तरीका होगा। यह पहले से ही यहाँ कोडित होने के लिए धन्यवाद। इस पर निर्माण करना, मुझे इस भिन्नता का उपयोग करना पसंद है जो संवाद की सामग्री div के वर्ग गुण को ले जाएगा, जिसमें मैं "no-close" वर्ग डाल सकता हूं:dialogClass : $("#my-dialog-id").attr("class"),

— LS

यह समाधान भागने के साथ बंद करने की अनुमति देता है, यदि आप बच के उपयोग पर रोकना चाहते हैं:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});

— म्लाडेन एडमोविक

Answer 3

"सर्वश्रेष्ठ" उत्तर कई संवादों के लिए अच्छा नहीं होगा। यहाँ एक बेहतर समाधान है।

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

Comments

यह आपकी आवश्यकता से अधिक जटिल है। $(".ui-dialog-titlebar-close", $(this).parent()).hide();

— केविन पेंको

@KevinPanko एक .aspx पृष्ठ में ASP.NET v.0.0 के साथ jquery ui डेमो साइट द्वारा प्रदान किए गए उदाहरण का उपयोग करते समय आपका सुझाव अच्छी तरह से काम करता है। jqueryui.com/demos/dialog/modal-form.html

— मैथ्यू डेली

.closest ('। ui-dialog') माता-पिता को ग्रहण करने से बेहतर है।

— टेक्नोमेज

Answer 4

आप जावास्क्रिप्ट के बजाय बंद बटन को छिपाने के लिए CSS का उपयोग कर सकते हैं:

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

यदि आप सभी मॉडल्स को प्रभावित नहीं करना चाहते हैं, तो आप एक नियम का उपयोग कर सकते हैं

.hide-close-btn .ui-dialog-titlebar-close{
    display: none;
}

और .hide-close-btnसंवाद के शीर्ष नोड पर लागू होते हैं

Comments

यह जवाब आसान और सीधा था। यह तभी लागू होता है, जब आप सभी संवादों के लिए बटन को निष्क्रिय करना चाहते हैं।

— मार्क ब्रिटिंघम

@MarkBrittingham आप केवल अपने कस्टम और चयनकर्ता के लिए एक कस्टम सीएसएस वर्ग लागू कर सकते हैं, तो यह जो आप चाहते हैं पर लागू होगा

— जुआन मेंडेस

Answer 5

जैसा कि आधिकारिक पेज पर दिखाया गया है और डेविड द्वारा सुझाया गया है:

एक शैली बनाएं:

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

फिर, आप इसे बंद करने के लिए किसी भी डायलॉग में नो-क्लोज क्लास जोड़ सकते हैं।

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

Answer 6

मुझे लगता है कि यह बेहतर है।

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

Comments

मुद्दा यह है कि यह कभी-कभी अन्य संवादों के लिए भी करीब बटन छुपाता है। इसे कैसे रोका जाए।

— अब्बासी

यहां तक ​​कि खुले का उपयोग करते हुए: फ़ंक्शन (ईवेंट, यूआई) {$ (यह) .closest ('। यूआई-डायलॉग'))। खोजें ('' यूआई-डायलॉग-टाइटलबार-क्लोज़ '))। शो (); } काम नहीं करता।

— अब्बासी

Answer 7

एक बार जब आप .dialog()किसी तत्व को बुलाते हैं , तो आप ईवेंट हैंडलर का उपयोग किए बिना किसी भी सुविधाजनक समय पर क्लोज बटन (और अन्य डायलॉग मार्कअप) का पता लगा सकते हैं:

$("#div2").dialog({                    // call .dialog method to create the dialog markup
    autoOpen: false
});
$("#div2").dialog("widget")            // get the dialog widget element
    .find(".ui-dialog-titlebar-close") // find the close button for this dialog
    .hide();                           // hide it

वैकल्पिक विधि:

डायलॉग ईवेंट हैंडलर के अंदर, this"डायलॉग" होने वाले तत्व को $(this).parent()संदर्भित करता है और डायलॉग मार्कअप कंटेनर को संदर्भित करता है, इसलिए:

$("#div3").dialog({
    open: function() {                         // open event handler
        $(this)                                // the element being dialogged
            .parent()                          // get the dialog widget element
            .find(".ui-dialog-titlebar-close") // find the close button for this dialog
            .hide();                           // hide it
    }
});

FYI करें, संवाद मार्कअप इस तरह दिखता है:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

यहाँ प्रदर्शन

Answer 8

रॉबर्ट मैकलेन का जवाब मेरे काम नहीं आया।

हालांकि यह मेरे लिए काम करता है:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

Answer 9

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

Answer 10

उपरोक्त कार्यों में से कोई भी नहीं। समाधान जो वास्तव में काम करता है:

$(function(){
  //this is your dialog:
  $('#mydiv').dialog({
    // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
    dialogClass: 'my-extra-class' 
  })
  // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
  $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
  // Step 3. Enjoy your dialog without the 'X' link
})

कृपया जांचें कि क्या यह आपके लिए काम करता है।

Answer 11

बटन को छिपाने का सबसे अच्छा तरीका यह है कि इसे डेटा-आइकन विशेषता के साथ फ़िल्टर किया जाए:

$('#dialog-id [data-icon="delete"]').hide();

Answer 12

http://jsfiddle.net/marcosfromero/aWyNn/

$('#yourdiv').                 // Get your box ...
  dialog().                    // ... and turn it into dialog (autoOpen: false also works)
  prev('.ui-dialog-titlebar'). // Get title bar,...
  find('a').                   // ... then get the X close button ...
  hide();                      // ... and hide it

Answer 13

वर्ग को निष्क्रिय करने के लिए, लघु कोड:

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

उपयोग किया जा सकता है।

Answer 14

डायलॉग विजेट द्वारा जोड़े गए नज़दीकी बटन में वर्ग 'यूआई-डायलॉग-टाइटलबार-क्लोज़' है, इसलिए आपके आरंभिक कॉल को .dialog () के बाद, आप फिर से नज़दीकी बटन को हटाने के लिए इस तरह के कथन का उपयोग कर सकते हैं: यह काम करता है ..

$( 'a.ui-dialog-titlebar-close' ).remove();

Answer 15

मैं संवाद बॉक्स की करीबी घटना को पकड़ता हूं। यह कोड तब <div>( #dhx_combo_list) हटाता है :

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

Answer 16

$(".ui-button-icon-only").hide();

Comments

यदि आप केवल आइकन छिपा रहे हैं तो आपको जेएस के बजाय सीधे सीएसएस का उपयोग करने में सक्षम होना चाहिए। सभी सीएसएस में .hide()सेट display:noneहै, इसलिए $(".ui-button-icon-only").hide();कार्यात्मक रूप से इसके बराबर है .ui-button-icon-only { display: none; }।

— काइलमिट

Answer 17

आप अपनी हेडर लाइन भी हटा सकते हैं:

<div data-role="header">...</div>

जो क्लोज बटन को हटा देता है।

Answer 18

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

Answer 19

प्राप्त करने का आसान तरीका: (अपने में ऐसा करें Javascript)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

Answer 20

जब से मैंने पाया कि मैं अपने ऐप में कई जगहों पर ऐसा कर रहा था, मैंने इसे एक प्लगइन में लपेटा:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

उपयोग उदाहरण:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

Answer 21

मैं वन-लाइनर्स (जहां वे काम करते हैं!) का प्रशंसक हूं। यहाँ मेरे लिए क्या काम करता है:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

Answer 22

कैसे इस शुद्ध सीएसएस लाइन का उपयोग करने के बारे में? मुझे दिए गए आईडी के साथ संवाद के लिए यह सबसे साफ समाधान लगता है:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

Answer 23

आप नीचे दिए गए कोड के साथ बंद बटन को हटा सकते हैं। अन्य विकल्प भी हैं जिनसे आप उपयोगी लड़ सकते हैं।

$('#dialog-modal').dialog({
    //To hide the Close 'X' button
    "closeX": false,
    //To disable closing the pop up on escape
    "closeOnEscape": false,
    //To allow background scrolling
    "allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();