backdrop ප්‍රත්‍යය

backdrop ප්‍රත්‍යය විසින් නිශ්චිත මූලද්‍රව්‍යය Z අක්ෂය ඔස්සේ පළමු මූලද්‍රව්‍යයට පහළින් නමුත් අනෙකුත් මූලද්‍රව්‍යවලට ඉහළින් පිහිටුවීම සකසයි. මෙම ප්‍රත්‍යය බොහෝ විට අනුමත කවුළු (modal windows) පෙන්වන විට පිටු පසුබිම අඳුරු කිරීමට භාවිතා කරයි. වර්තමානයේදී backdrop ප්‍රත්‍යය ක්‍රියා කරන්නේ <dialog> මූලද්‍රව්‍යය භාවිතයෙන් සාදන ලද අනුමත කවුළු සමඟ පමණි.

වාක්‍ය රීතිය

cssතෝරන්නා::backdrop {
  background: පිටු පසුබිම සඳහා වර්ණය;
}

උදාහරණය

බොත්තමක් ඔබළු වූ විට අනුමත කවුළුවක් විවෘත වන අතර පිටු පසුබිම අඳුරු වන පරිදි අපි කරමු:

html<button id="open">විවෘත කරන්න</button>
<dialog>
  <form method="dialog">
    <p>පෙළ පෙළ පෙළ</p>
    <button id="close">වසන්න</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: අළු;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

මෙයද බලන්න