+ Start a Discussion

Styleclass lost when a custom pop up is opened

<apex:component controller="mycontroller" allowDML="true">
  <style type="text/css">
            background-color: white;
            border-width: 0px;
            border-style: solid;
            box-shadow: 5px 5px 10px black;
            z-index: 2;
            left: 50%;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can add 
            the height property for a fixed size pop up if you want.*/
            width: 80%;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;


    <apex:outputPanel id="custPopUp" > 
        <apex:outputPanel styleClass="popupBackground" rendered="{!displayPopup}"/>
            <apex:outputPanel styleClass="custPopup" layout="inline" rendered="{!displayPopup}">              
                <div align="right">
                    <apex:commandButton value="X" action="{!closePopup}" rerender="custPopUp"/>                            
        <apex:pageBlockSection title="Information" columns="2"> 
            <apex:inputField showDatePicker="false" label="From" value="{!showData.From__c}" styleclase="styledate"/>
            <apex:inputField id ="To" label="To" value="{!showData.To__c}" showDatePicker="false" styleclase="styledate"/>               


    <apex:commandLink style="width:125px;text-decoration: none;" styleClass="btn" action="{!showPopup}"  rerender="custPopUp">   

styleclass=showDate -- opens a calendar. The style and scripts are in a static resource files.
This styleclass works on the page, but style is lost when Popup is opened.