JQuery UI ডায়ালগের ক্লোজ বোতামটি কীভাবে সরাবেন?

Question

আমি jQuery UI দ্বারা নির্মিত একটি ডায়ালগ বাক্সের ঘনিষ্ঠ বোতামটি ( শীর্ষ-ডান কোণে এক্স ) কীভাবে সরিয়ে ফেলব ?

Comments

ডকুমেন্টেশনটি দেখুন, প্রথম উপ-শিরোনাম: api.jqueryui.com/dialog

— মাইক কোল

@ মাইককোল ডকুমেন্টেশনটি 1.10 এর জন্য - আমি মনে করি আপনি যদি কোনও নিম্ন সংস্করণে ঘনিষ্ঠ বোতামটি গোপন করতে চান তবে আপনাকে নীচের উত্তরের মতো কিছু করতে হবে।

— জেরেট

"Ui- ডায়ালগ-শিরোনামবার-বন্ধ" ব্যবহার করুন: "প্রদর্শন: কিছুই নয়;" যখন আমরা 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.dialog' ব্যবহার করতে হবে। সুতরাং সঠিক লাইনটি হবে; ("। ui- ডায়ালগ-শিরোনাম বার-বন্ধ", ui.dialog) h লুকান ();

— ব্র্যাডলে মাউন্টফোর্ড

@Bradley। ui আমার পক্ষে কাজ করেনি, ui.dialog কিন্তু প্রতিটি ক্ষেত্রে প্রয়োগ করেছে। ওট ওয়ার্কিং শুধুমাত্র একটিতে প্রয়োগ করার জন্য ওপেন ফাংশনটি সংজ্ঞায়িত করা হয় কারণ আমি এই কাজটি করতে হয়েছিল: "("। Ui- ডায়ালগ-শিরোনামবার-বন্ধ ", এটি.পরিমিতনোড) লুকান ();

— নবাব

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

— ওপেনগ্রিড

Answer 2

এখানে কেবলমাত্র সিএসএস ব্যবহার করে অন্য একটি বিকল্প রয়েছে যা পৃষ্ঠায় প্রতিটি সংলাপের উপরে চলে না।

সিএসএস

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

এইচটিএমএল

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

জাভাস্ক্রিপ্ট।

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

কাজের উদাহরণ

Comments

আমি এই পদ্ধতির পছন্দ করি কারণ আমি এটির মতো জিনিসগুলির পাশাপাশি এটি ব্যবহার করতে পারি: .noTitleDlg .ui- ডায়ালগ-শিরোনাম বার {প্রদর্শন: কিছুই নয় CSS সিএসএসে আমি যেভাবে আমার ডায়ালগটি প্রদর্শিত ও আচরণ করতে চাই এবং তারপরে কেবল ডায়লগক্লাসটি সেট করি।

— এ। মারে

খুব পরিষ্কার সমাধান ... +1 বোতাম অপসারণ করতে অতিরিক্ত জেএস কার্যকারিতা জড়িত না করার জন্য।

— Bongs

ভালো বুদ্ধি. আপনি সমস্ত ডায়ালগের জন্য একই খোলার পদ্ধতিটি ব্যবহার করেন এমন পরিস্থিতিতে একটি নির্দিষ্ট ডায়লগকে লক্ষ্য করতে কার্যকর হয় এবং নির্দিষ্ট উদাহরণের জন্য এটি পরিবর্তন করা খুব ব্যবহারিক নয়।

— ZolaKt

আমার প্রিয় সমাধান। আমি ভাবছিলাম যে এরকম কিছু হবে সর্বোত্তম পন্থা। এটি ইতিমধ্যে এখানে কোড আপ করার জন্য ধন্যবাদ। এটির ভিত্তিতে, আমি এই প্রকরণটি ব্যবহার করতে চাই যা সংলাপের বিষয়বস্তু ডিভের শ্রেণীর বৈশিষ্ট্য গ্রহণ করবে, যার মধ্যে আমি "নো-ক্লোজ" শ্রেণি রাখতে পারি:dialogClass : $("#my-dialog-id").attr("class"),

— এলএস

আপনি যদি পলায়নের ব্যবহার বন্ধ করতে চান তবে এই সমাধানটি পালানোর সাথে সাথে বন্ধ হওয়ার অনুমতি দেয়:$( ".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();

— কেভিন প্যাঙ্কো

@ কেএসপিএক্স পৃষ্ঠায় ASP.NET v2.0 সহ jquery ইউআই ডেমো সাইট দ্বারা সরবরাহিত উদাহরণটি ব্যবহার করার সময় কেভিনপ্যাঙ্কো আপনার পরামর্শটি ভাল কাজ করে। jqueryui.com/demos/dialog/modal-form.html

— ম্যাথু ডালি

.closest ('। ui- ডায়ালগ') পিতামাতাকে ধরে নেওয়ার চেয়ে ভাল।

— টেকনোমেজ

Answer 4

আপনি জাভাস্ক্রিপ্টের পরিবর্তে ক্লোজ বোতামটি লুকানোর জন্য সিএসএস ব্যবহার করতে পারেন:

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

আপনি যদি সমস্ত মডেলগুলিকে প্রভাবিত করতে না চান তবে আপনি এই জাতীয় কোনও নিয়ম ব্যবহার করতে পারেন

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

এবং .hide-close-btnডায়ালগের উপরের নোডে প্রয়োগ করুন

Comments

এই উত্তর ছিল সহজ এবং সোজা। এটি কেবলমাত্র যদি আপনি সমস্ত ডায়ালগের জন্য বোতামটি অক্ষম করতে চান তবে তা প্রযোজ্য।

— মার্ক ব্রিটিংহাম

@ মার্কব্রিটিংহ্যাম আপনি কেবলমাত্র আপনার মডেল এবং নির্বাচককে একটি কাস্টম সিএসএস ক্লাস প্রয়োগ করতে পারেন, তবে এটি আপনি যার জন্য প্রযোজ্য হবে

— জুয়ান মেন্ডেস

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

ইস্যুটি হ'ল এটি অন্যান্য সংলাপগুলির জন্য মাঝে মাঝে ঘনিষ্ঠ বোতামটিও লুকিয়ে রাখে। কীভাবে এটি প্রতিরোধ করা যায়।

— জাভেদ আব্বাসি

এমনকি ওপেন ব্যবহার করে: ফাংশন (ইভেন্ট, ইউআই) {$ (এটি)। ক্লোজস্ট ('। ইউআই-ডায়ালগ')। সন্ধান করুন ('। Ui- ডায়ালগ-শিরোনামবার-বন্ধ')। শো (); আমি কাজ করি না

— জাভেদ আব্বাসি

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

এফওয়াইআই, ডায়ালগ মার্কআপ এর মতো দেখাচ্ছে:

<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

আপনি যদি কেবলমাত্র আইকনটি লুকিয়ে রাখেন তবে আপনার এখানে জেএসের পরিবর্তে সোজা CSS ব্যবহার করতে সক্ষম হওয়া উচিত। সমস্ত .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();