बटन बंद करू

मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल एकटा जेनेरिक बंद बटन.

इस पेज पर

उदाहरण

कें साथ कोनों घटक कें खारिज करय या बंद करय कें विकल्प प्रदान करूं .btn-close. डिफ़ॉल्ट स्टाइलिंग सीमित अछि, मुदा बेसी अनुकूलन योग्य अछि । पूर्वनिर्धारित बदलबाक लेल Sass चर संशोधित करू background-image. स्क्रीन रीडर के लेल पाठ जरूर शामिल करू , जेना हम aria-label.

एचटीएमएल

<button type="button" class="btn-close" aria-label="Close"></button>

अक्षम अवस्था

अक्षम बंद बटन अपन बदलैत अछि opacity. हमनें भी लागू करलऽ छै pointer-events: noneआरू user-select: noneहोवर आरू सक्रिय राज्यऽ क॑ ट्रिगर होय स॑ रोकै लेली ।

एचटीएमएल

<button type="button" class="btn-close" disabled aria-label="Close"></button>

सफेद रूपांतर

पूर्वनिर्धारितकेँ वर्गक .btn-closeसंग उज्जर करबाक लेल बदलू . .btn-close-whiteई वर्ग filterगुण क उपयोग कए उल्टा करबा लेल करैत अछि background-image.

एचटीएमएल

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

सस्स

चर

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);