Search code examples
javascriptcssmaterialize

Adding additional css attribute to particular modal class

How can i add a customize css for particular modal? There could be many modal, which defined in the class of modal. (For example: modal1, modal2, modal3, etc) The modal-overlay class will be generated when the modal is clicked (materializecss framework) 

<div id="modal3" class="modal modal3">
    <div class="modal-content">
        <h4>Congratulation</h4>
        <div class="row martop-20">
            <p>HQ1379622</p>
            <p>HQ1379622</p>
            <p>HQ1379622</p>
            <p>HQ1379622</p>
        </div>
        <a class="btn-grab btn-select-pop waves-effect" href="#modal1">OK</a>
    </div>
</div>

<div class="modal-overlay" style="z-index: 1002; display: block; opacity: 0.5;"></div>

The modal-overlay will only be generated when the modal is active.

I need to change the background / some css for this particular modal-overlay.

Output sample

This is the output if the modal is show, and the modal-overlay will be removed when the modal is closed.

Solution 
  • #modal3 + .modal-overlay {
  background-color: #bada55;
}

    It seems that the overlay always appears directly as next neighbor element of the modal. So just select the directly following .modal-overlay of the modal itself.

    More infos about the adjacent sibling