How to: Create a custom pop-up window

Required stylesheets:
  • DesignPatterns/PopUpWindow.css
  • Lists.css

If you are developing a web application you may have to create custom pop-up windows.

How to do it:
<div id="MyCustomPopUpWindow" class="MyCustomPopUpWindow PopUpWindow AlwayOnTop Collapsed">
    <div class="PopUpWindowHeader">
        <div class="PopUpWindowIcon"><img src="/Images/DialogIcon.gif" alt="" /></div>
        <div class="PopUpWindowTitle"><span>My custom pop-up window</span></div>
        <div class="PopUpWindowControlBoxes">
            <ul class="HorizontalList NoListStyle">
                <li><a href="javascript:..." title="Close"><img src="/Images/Close.gif" alt="Close" /></a></li>
            </ul>
        </div>
    </div>
    <div class="PopUpWindowContent">
        <p>Some content...</p>
        <input type="button" value="OK" onclick="javascript:..." />
    </div>
</div>

To show and close the pop-up window change css class from Collapsed to Visible and vice versa.

Last edited Jan 22, 2010 at 10:03 PM by BlueCode, version 3

Comments

No comments yet.