function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Cynthia Rodgers 12Cynthia Rodgers 12 

How to move a popup alert to the middle of the page versus at the very top of the page

I have a popup alert on my case page layout that appears at the top of the case page.  I wanted to find out if the popup alert message could be
  • moved to the middle of the page
  • how to add a image file (that is sized down) or a border to make it stand out.  
  • image that i have saved to Documents is Exclamation  [img src="https://texascapitalbank--WMPDev1--c.cs11.content.force.com/servlet/servlet.ImageServer?id=015Z0000002Ty1e&oid=00DZ000000N88xi&lastMod=1500469279000"]
User-added image



 
Rahul KumarRahul Kumar (Salesforce Developers) 
Hi Cynthia Rodgers,

Please refer the below CSS code to pop up an alert at the middle of the page.
<style type="text/css">
        .customPopup {
           background-color: #6495ed;
            border-style: solid;
            border-width: 3px;
            left: 20%;
            padding: 5px;
            position: absolute;            
            /* These are the 3 css properties you will need to tweak so the pop 
                                    up 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 also add 
                                    the height property for a fixed size pop up.*/
            width: 500px;           
            top: 20%;
        }        
    </style>

let me know if it helps.

Please mark it as best answer if the information is informative.

Thanks
Rahul Kumar
Cynthia Rodgers 12Cynthia Rodgers 12
Thanks Rahul Kumar,
I have an additional question about where to place this piece of code?  I have been playing with it and the popup stopped popping up....here is what my popup code looks like before adding the code you referenced:

<apex:page standardController="Case" rendered="{!Case.Wire_to__c<>null}">
<script type ="text/javascript">
{
window.alert("IF THIS IS A WIRE, PLEASE ATTACH APPROVED WIRE FORMS");
}
</script>
</apex:page>