Search code examples
htmlcssajaxcontroltoolkit

Overwrite inline style

I'm giving the below style to CSS file to overwrite the z-index of control but it is not working. What's wrong with this code? How to overwrite the ajaxToolkit's inline style with !important?

.aspx page

<ajaxToolkit:ModalPopupExtender id="mpeOptions" runat="server" 
            popupcontrolid="PanelOptions" targetcontrolid="btnShowOptions" 
            cancelcontrolid="btnCloseOptions" backgroundcssclass="modalBackground"
/>

css page

.modalBackground[style] {
    z-index: 300 !important;
}

Runtime converts it to

<div    class="modalBackground" 
        id="AccordionPaneStep3_content_mpeOptions_backgroundElement" 
        style="left: 0px; top: 0px; display: none; position: fixed; 
        z-index: 10000;"
/>
Solution

  • Working one... 

     .parentclasses .modalBackground
 {
    z-index: 300 !important;
    position: fixed !important;
 }