টুইটার বুটস্ট্র্যাপ সতর্কতা বার্তা বন্ধ করুন এবং আবার খুলুন

Question

সতর্কতা বার্তা নিয়ে আমার সমস্যা আছে। এটি সাধারণত প্রদর্শিত হয়, এবং যখন ব্যবহারকারী xটিপুন (বন্ধ করুন) তবে আমি এটিটি বন্ধ করতে পারি , কিন্তু যখন ব্যবহারকারী আবার এটি প্রদর্শনের চেষ্টা করে (উদাহরণস্বরূপ, বোতাম ইভেন্টটি ক্লিক করুন) তখন এটি প্রদর্শিত হয় না। (তদতিরিক্ত, যদি আমি এই সতর্কতা বার্তাটি কনসোলে প্রিন্ট করি তবে এটি সমান [])) আমার কোডটি এখানে রয়েছে:

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

এবং ইভেন্ট:

 $(".alert").show();

পুনশ্চ! কিছু ঘটনা ঘটে যাওয়ার পরে আমাকে সতর্কতা বার্তা দেখাতে হবে (উদাহরণস্বরূপ, বোতাম ক্লিক করা)। বা আমি কি ভুল করছি?

Answer 1

ডেটা-বরখাস্ত উপাদানটিকে পুরোপুরি সরিয়ে দেয়। পরিবর্তে jQuery এর .hide () পদ্ধতিটি ব্যবহার করুন।

দ্রুত-তাড়িত পদ্ধতি:

উপাদানটি অনক্লিক করে লুকানোর জন্য ইনলাইন জাভাস্ক্রিপ্ট ব্যবহার করা:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

এটি কেবলমাত্র যদি আপনি অলস হন তবে এটি ব্যবহার করা উচিত (যদি আপনি একটি রক্ষণাবেক্ষণযোগ্য অ্যাপ্লিকেশন চান তবে এটি কোনও ভাল জিনিস নয়)।

সঠিকভাবে করার পদ্ধতি:

উপাদানকে আড়াল করার জন্য একটি নতুন ডেটা অ্যাট্রিবিউট তৈরি করুন।

javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

এবং তারপরে মার্কআপের ডেটা-আড়ালে ডেটা-বরখাস্ত পরিবর্তন করুন। Jsfiddle এ উদাহরণ ।

$("." + $(this).attr("data-hide")).hide()

এটি ডেটা-আড়ালে নির্দিষ্ট ক্লাসের সাথে সমস্ত উপাদানকে আড়াল করবে, অর্থাত: data-hide="alert"সতর্কতা শ্রেণীর সাহায্যে সমস্ত উপাদান আড়াল করবে।

Xeon06 একটি বিকল্প সমাধান সরবরাহ করেছে:

$(this).closest("." + $(this).attr("data-hide")).hide()

এটি কেবল নিকটতম অভিভাবক উপাদানটি আড়াল করবে। আপনি যদি প্রতিটি সতর্কতাটিকে একটি অনন্য শ্রেণি দিতে না চান তবে এটি খুব কার্যকর। দয়া করে নোট করুন, তবে আপনাকে সতর্কতার মধ্যে বন্ধ বোতামটি রাখা উচিত।

Jquery ডক থেকে। ক্লোজস্টের সংজ্ঞা :

সেটের প্রতিটি উপাদানের জন্য, উপাদানটি নিজেই পরীক্ষা করে এবং ডিওএম ট্রিতে এর পূর্বপুরুষদের দ্বারা অনুসরণ করে নির্বাচকের সাথে মেলে এমন প্রথম উপাদানটি পান।

Comments

হে! আপনার সঠিক উত্তর সম্পর্কে এটি। এটি alertপৃষ্ঠায় একই শ্রেণি (যেমন, ) থাকা প্রতিটি উপাদানকে আড়াল করবে । এর সমাধান $(this).closest("." + $(this).attr("data-hide")).hide();হ'ল কলব্যাকের বিষয়বস্তুগুলি এই লাইনের সাথে প্রতিস্থাপন করা হবে যা কেবল নিকটতম অভিভাবক উপাদানকেই প্রভাবিত করবে, কারণ বরখাস্ত বোতামটি সাধারণত প্রভাবিত করে এমন সতর্কতার মধ্যে রাখা হয়।

— অ্যালেক্স টারপিন

এটি সত্য, আমি এটিকে সেভাবে কাজ করার কথা ভাবিনি। এটি যাইহোক, অল্প পরিমাণে এই সমাধানের সরলতা সরিয়ে ফেলবে। আমি এটি বিদ্যমান কোডটিতে একটি মন্তব্য হিসাবে যুক্ত করব। ধন্যবাদ!

— হেনরিক কার্লসন

এটি নতুন .. আপনি কোথায় '$ (ফাংশন () {..' সংজ্ঞায়িত করবেন

— এস রোসম

যে কোনও জায়গায় জাভাস্ক্রিপ্ট ফাইল বা <script> কোডে এখানে </ translation> ট্যাগ।

— হেনরিক কার্লসন

আপনি যদি $ (দস্তাবেজ) ব্যবহার করেন তবে। ('ক্লিক করুন', '[ডেটা-লুকান]', ফাংশন ()) / * * /}) আপনার উত্তরটি নিখুঁত হবে;)

— shock_gone_wild

Answer 2

আমি ডায়লগটি প্রদর্শন / আড়াল করতে সবেমাত্র একটি মডেল ভেরিয়েবল ব্যবহার করেছি এবং এটি মুছে ফেলেছি data-dismiss="alert"

উদাহরণ:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

আমার জন্য কাজ করে এবং jquery এ যাওয়ার প্রয়োজন বন্ধ করে দেয়

Comments

সর্বাধিক ভোট গ্রহণযোগ্য উত্তরের চেয়ে অনেক সহজ / উত্তম সমাধান!

— Abs

আমার মতে আরও ভাল সমাধান

— ডেভকন

আমি আপনার ধারণাটি পছন্দ করি

— কুমারসান পেরুমাল

Answer 3

আমি মনে করি বুটস্ট্র্যাপের close.bs.alertইভেন্ট প্রকারটি সরিয়ে ফেলার পরিবর্তে সতর্কতাটি গোপন করার জন্য এই সমস্যাটির একটি ভাল পদ্ধতির সুবিধা নেওয়া উচিত। বুটস্ট্র্যাপ এই ইভেন্টের ধরণটি প্রকাশ করার কারণটি হ'ল আপনি DOM থেকে সতর্কতা অপসারণের ডিফল্ট আচরণটি ওভাররাইট করতে পারেন।

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

Answer 4

যদি আপনি কোনও এমভিভিএম লাইব্রেরি ব্যবহার করেন যেমন নকআউট.জেএস (যা আমি অত্যন্ত সুপারিশ করি) আপনি আরও পরিষ্কার করে এটি করতে পারেন:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

Comments

data-bind="click:function(){showAlert(false);}অবিচ্ছিন্ন জাভাস্ক্রিপ্টের একটি নিখুঁত উদাহরণ যা পরিষ্কার হওয়ার থেকে দূরে । আমি দৃ strongly

— লিও

@ লিও কীভাবে বাধা দিচ্ছেন?

— ওহাদ স্নাইডার

প্রতিটি এককভাবে বাধা। আপনি সক্রিয়ভাবে আপনার এইচটিএমএল কাঠামো / মার্কআপে আচরণ "এম্বেড" করছেন। ভাবুন যে আপনাকে সেই আচরণটি বদলাতে হবে ... আপনাকে কত পৃষ্ঠা এবং এইচটিএমএল উপাদান পরিবর্তন করতে হবে? আমাকে ভুল করবেন না, এটি এখনও জিজ্ঞাসিত প্রশ্নের উত্তর দেয় এবং সে কারণেই আমি এটিকে হ্রাস করব না। তবে এটি "ক্লিনার" সমাধান থেকে অনেক দূরে

— লিও

না, আমি আসলে যা বলছি তা হ'ল উদ্বেগের পৃথকীকরণ । আপনার দর্শনগুলিতে (এইচটিএমএল) কখনই কোনও জাভাস্ক্রিপ্ট থাকা উচিত নয়, নেতিবাচক প্রভাবগুলি কোনও দেব দলে বিশাল হতে পারে। নকআউট এবং কিছুটা বিতর্কিত data-bindবৈশিষ্ট্য স্ট্যাকওভারফ্লো.com

— লিও

আপনি "জাভাস্ক্রিপ্ট" কী বিবেচনা করবেন? যদি এটিতে কেবল প্রার্থনা করার পদ্ধতিটির নাম থাকে? এটি কি সত্য যে এটি এটিকে একটি প্যারামিটার দিয়ে বলেছে (মিথ্যা) যা এটি আপনার চোখে বাধা সৃষ্টি করে?

— ওহাদ স্নাইডার

Answer 5

সুতরাং আপনি যদি এমন কোনও সমাধান চান যা ডায়নামিক এইচটিএমএল পৃষ্ঠাগুলি মোকাবেলা করতে পারে, যেমন আপনি ইতিমধ্যে এটি অন্তর্ভুক্ত করেছেন আপনার এখন এবং ভবিষ্যতে ডোমে থাকা বা মুছে ফেলা সমস্ত উপাদানগুলিতে হ্যান্ডলারটি সেট করতে jQuery এর লাইভ ব্যবহার করা উচিত।

আমি ব্যবহার করি

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

Answer 6

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে:

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});

Answer 7

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

আমার সমাধানটি ছিল একটি ছোট, কাস্টমাইজযোগ্য, জ্যাকোয়ারি প্লাগইন যা একটি সঠিকভাবে গঠিত বুটস্ট্র্যাপ 3 সতর্কতা (আপনার প্রয়োজন হিসাবে বন্ধ বোতাম সহ বা ছাড়াই) ইনজেক্ট করে এবং বাক্সটি বন্ধ হওয়ার পরে আপনাকে সহজেই এটি পুনরায় জন্মানোর অনুমতি দেয়।

ব্যবহার, পরীক্ষা এবং উদাহরণগুলির জন্য https://github.com/davesag/jquery-bs3 সতর্কতা দেখুন ।

Answer 8

হেনরিক কার্লসন পোস্ট করেছেন এবং মার্টিন প্রিক্রিল সম্পাদিত উত্তরের সাথে আমি সম্মত। অ্যাক্সেসযোগ্যতার ভিত্তিতে আমার একটি পরামর্শ রয়েছে। আমি এর শেষে .attr ("আরিয়া-লুকানো", "সত্য") যুক্ত করব, যাতে এটি দেখতে দেখতে:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

Comments

আসলেই কি দরকার? jQuerys। হাইড ফাংশনটি ডিসপ্লে সেট করে: কোনওটি নয়, পর্দার পাঠকরা এটিকে যে কোনওভাবে লুকানো হিসাবে স্বীকৃতি দেওয়ার জন্য যথেষ্ট স্মার্ট হওয়া উচিত নয়?

— হেনরিক কার্লসন

Answer 9

উপরের সমস্ত সমাধান বহিরাগত গ্রন্থাগারগুলি হয় হয় কৌণিক বা jQuery এবং বুটস্ট্র্যাপের একটি পুরানো সংস্করণ। সুতরাং, খাঁটি জাভাস্ক্রিপ্টে চার্লস উইকে স্মিথের সমাধানটি বুটস্ট্র্যাপ 4 এ প্রয়োগ করা হয়েছে । হ্যাঁ, বুটস্ট্র্যাপের নিজস্ব মডেল এবং সতর্কতা কোডের জন্য jQuery প্রয়োজন, তবে প্রত্যেকে jQuery এর সাথে নিজস্ব কোডটি লেখেন না।

সতর্কতার এইচটিএমএল এখানে:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

নোট করুন যে প্রাথমিকভাবে সতর্কতাটি লুকানো ( style="display: none;") এবং মানের পরিবর্তে data-dismiss="alert"আমরা এখানে ব্যবহার করেছি data-hide="alert"।

সতর্কতা প্রদর্শন করতে এবং বন্ধ বোতামটি ওভাররাইড করার জন্য এখানে জাভাস্ক্রিপ্ট দেওয়া হল:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

আপনি কোডের অন্য কোথাও প্রোগ্রামালিমে সতর্কতাটি আড়াল করতে বা দেখাতে চান, কেবল করুন myAlert.style.display = 'none';বা করুন myAlert.style.display = 'block';।

Answer 10

সমস্যাটি হ'ল জাভাস্ক্রিপ্টের style="display:none"সাহায্যে সতর্কতাটি আড়াল করা উচিত বা কমপক্ষে এটি দেখানোর সময় শৈলীর বৈশিষ্ট্যটি মুছে ফেলা উচিত।

Comments

আসলেই নয়, সমস্যাটি হ'ল ডেটা বরখাস্ত করুন

— হেনরিক কার্লসন

Answer 11

অন্যান্য উত্তরের উপর ভিত্তি করে এবং ডেটা-আড়ালে ডেটা-বর্জনের ভিত্তিতে, এই উদাহরণটি কোনও লিঙ্ক থেকে সতর্কতা খোলার হাতল পরিচালনা করে এবং সতর্কতাটি বার বার খোলার এবং বন্ধ করার অনুমতি দেয়

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

Answer 12

আমি সমস্ত পদ্ধতি চেষ্টা করেছি এবং আমার পক্ষে সর্বোত্তম উপায় হ'ল বিল্ট-ইন বুটস্ট্র্যাপ ক্লাস .fadeএবং.in

উদাহরণ:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

দ্রষ্টব্য: jQuery এ, সতর্কতা দেখানোর জন্য অ্যাডক্লাস ('ইন'), এটি লুকানোর জন্য অপসারণ ক্লাস ('ইন')।

মজাদার ঘটনা: এটি সমস্ত উপাদানগুলির জন্য কাজ করে। শুধু সতর্কতা নয়।

Answer 13

এখানে একটি সমাধান ভিত্তিতে উত্তর দ্বারা হেনরিক Karlsson কিন্তু সঠিক সঙ্গে ঘটনা triggering (উপর ভিত্তি করে বুটস্ট্র্যাপ সূত্র ):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

উত্তরটি বেশিরভাগ ক্ষেত্রে আমার জন্য, একটি নোট হিসাবে।

Answer 14

এটি অতিরিক্ত "ধারক" ডিভ যোগ করে এবং প্রতিবার মুছে ফেলা সতর্কতা ডিভিও যুক্ত করে কেবল এটি করা যায় না। আমার জন্য কাজ করে বলে মনে হয়?

এইচটিএমএল

<div id="alert_container"></div>

জাতীয়

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');