the delete popup window is done using 2 divs that are set to display: none by default.
the first div is an overlay that shows the grey screen in the background, the second div contains the delete form which has a delete button and a hidden form element in it that is used to pass the ID of the record to delete.
the delete button in the results page uses an onClick event to change the ID of the hidden element, and change the display property of the 2 hidden divs:
for example, the delete button on a page i created for a users table looks like this:
onclick="document.getElementById('WADADeleteRecordID').value=<?php echo($row_WADAUsers['UserID']); ?>;document.getElementById('deleteBox').style.display = 'block';document.getElementById('deleteMessage').style.display = 'table';"
and the delete form that is created looks like this:
<div class="black_overlay" id="deleteBox"></div>
<div class="messageContainer" id="deleteMessage">
<div class="messageWrapper">
<div class="messageContent">
This will permanently remove the record from your database.<br/>
This action cannot be undone.<br/><br/>
<input type="submit" value="Delete" class="formButton unstyled" id="Delete" name="Delete" />
<input type="button" value="Cancel" class="formButton unstyled" id="Cancel" name="Cancel" onclick="document.getElementById('deleteBox').style.display = 'none';document.getElementById('deleteMessage').style.display = 'none';" />
</div>
</div>
</div>
the initial CSSS for the black_overlay and messageContainer classes uses display: none; to hide them till the delete button is clicked.
the css for the messageWrapper class should use absolute positioning and top: 50%; to position it in the middle of the page.