Creating Pop-Up window

PopUp Creation

Here we are giving a proceadre for creating a popup , which is by clicking a button a popup will
appear.

Step 1: In order to create a popup window follow the below steps.

Here we are adding a hyper link in the footer page(CachedFooterDisplay.jsp)

as sarwesh

<p><a href="javascript:showAdPopup();"> Sarwes</a></p>

Add the following script at the top of the CachedFooterDisplay.jsp

<script type="text/javascript" src="<c:out value="$
{jsAssetsDir}javascript/StoreCommonUtilities.js"/>"></script>



When we click the above link it will show a popup.

Step 2 : Add the follwing code at bottom of the CachedFooterDisplay.jsp

<div id="ad_popup_main_div">
<div id="ad_popup" dojoType="dijit.Dialog" >
<div class="top_left" id="ad_popup_div_1"><img alt="" src="<c:out
value="${jspStoreImgDir}" />images/trasparent.gif" /></div>
<div class="top_right" id="ad_popup_div_2"><img alt="" src="<c:out
value="${jspStoreImgDir}" />images/trasparent.gif" /></div>
<div class="header" id="popupHeader">
<div class="close" id="ad_popup_div_3">
<a id="closeLink" href="javascript:hideAdPopup();"
>
<span onclick="javaScript:hideAdPopup();"
class="icon" id="ad_popup_div_4">
<img alt="" src="<c:out value="$
{jspStoreImgDir}${vfileColor}" />popup_close.png" />
</span>
<fmt:message key="QuickInfo_Close" bundle="$
{storeText}"/>

</a>
</div>
</div>

<div class="bodyarea" id="ad_popup_div_5">
<div class="bodycontent" id="ad_popup_div_6">
<div class="title" id="ad_popup_div_7">
</div>
<div class="ad_details" id="ad_popup_div_8">
<div class="ad_visual" id="ad_popup_div_9">
</div>
<div class="ad_information"
id="ad_popup_div_10">
<!-- <img alt="" src="<c:out value="$
{jspStoreImgDir}${vfileColor}" />logo.gif" /> -->
<p>This is a new popup is created by Sarwes and Rajsheaker. <i><u><b>Now Start
your work</b></u></i></p>

</div>
</div>
</div>

<div class="footer" id="ad_popup_div_11">
<div class="bot_left" id="ad_popup_div_12"></div>
<div class="bot_right" id="ad_popup_div_13"></div>
</div>
</div>
</div>
<script type="text/javascript">dojo.addOnLoad(function()
{ parseWidget("ad_popup"); } );</script>

Step 3: Add the following javascript code at the end in StoreCommonutilities.js file for show

popup and hide popup.

function showAdPopup(){

dijit.byId('ad_popup').show();

/**
* This function hides the advertisement popup.
*/
function hideAdPopup(){
dijit.byId('ad_popup').hide();
}

Step 4: Add the following code at bottom in the common1_1.css file.

/* Add the below CSS classes for the advertisement popup*/

#ad_popup_main_div {
display:none;
}
#ad_popup {
width: 498px;
position: absolute;
display:block;
z-index: 9999;
background-image: url('../images/colors/color1/transparent.gif');

background-repeat:no-repeat;
overflow: hidden;

}
#ad_popup .top_left{
background-image: url('../images/colors/color1/popup_topleft.png');
background-repeat:no-repeat;
height:10px;
width:8px;
float:left;
}
#ad_popup .top_right{
background-image: url('../images/colors/color1/popup_topright.png');
background-repeat:no-repeat;
background-position:right;
height:10px;
width:490px;
float:left;
}
#ad_popup .closeText{
display: none;
}
#ad_popup .header{
background-image: url('../images/colors/color1/popup_center_tile.png');
background-repeat:repeat-y;
text-align: right;
height: 23px;
clear:left;
}
#ad_popup .close{
padding: 5px 15px 2px 0px;
color: #666666;
}
#ad_popup .close .icon{
padding-top: 2px;
padding-left: 4px;
float: right;
}
#ad_popup .bodycontent{
background-image: url('../images/colors/color1/popup_center_tile.png');
background-repeat:repeat-y;
margin: 0;
padding: 0 0 15px 0;
}
#ad_popup .bodycontent .title{
padding: 0 17px 0 15px;

}
#ad_popup .bodycontent .ad_details {
padding: 15px 24px 0 18px;
display:inline-block;
}
#ad_popup .bodycontent .ad_details .ad_visual {
float: left;
width: 190px;
text-align: center;
}
#ad_popup .bodycontent .ad_details .ad_information{
width:245px;
float:right;
padding-left:15px;
}
#ad_popup .footer {
text-align: right;
height: 14px;

width: 498px;
}
#ad_popup .footer .bot_left{
background-image: url('../images/colors/color1/popup_botleft.png');
background-repeat:no-repeat;
height:14px;
width:8px;
float:left;
}
#ad_popup .footer .bot_right{
background-image: url('../images/colors/color1/popup_botright.png');
background-repeat:no-repeat;
background-position:right;
height:14px;
width:490px;
float:left;
}