How to position my popup window?

Question

I've got a popup window that is enabled the following way:

<input type="button" value="Sök" onClick="getElementById('popupD').style.display=''">

The relevant DIV is

<div class="popup" id="popupD" 
<% if(!showSearch) { %>
style="display: none;"
<% } %>
>
<%@ include file="handlaggarelist.jsp" %>
</div>

The popup appear but too high up on the page. The CSS for the popup is

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

Can you help me position the popup since otherwise it appears at the top of the page?

Thanks

score 2 · Answer 1 · answered Apr 23 '12 at 06:52

2

add position:absolute, top set to an acceptable distance from top and z-ndex on the popup. Make sure the z-index is a very high no. like 10000. This will render your popup on top of other element.

answered Apr 23 '12 at 06:52

Satish N Ramteare

197
1
9

score 1 · Accepted Answer · answered Apr 23 '12 at 06:19

You can position your popup absolutely on the page with something like this:

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
    position: absolute;
    top: 200px;
}

That will make the popup appear 200 px from the top of the page.

How to position my popup window?

2 Answers2