How can i create and display a self designed window on current webpage instead of popup?
Question
I want to create and display a self designed window on current webpage instead of popup as you can see on this page Open the link and click first "Demo" button on that page.
and the same type window appeared when I tried to put a link on this question on stackoverflow which accepted my link.
for example facebook also uses this type of window to display tagged images. please help me.
2 answers
solution1
0 2012-06-29 13:34:00
If you're using ASP.NET, that functionality is available in the Ajax Control Toolkit .
It's also possible to do it using straight up HTML and JavaScript.
You simply create a div with the content that you want in the pop-up, and set its "Display" property to "none".
Upon user interaction (mouse click, button click, etc) use JavaScript to set the Display to "block". (There is a bit more to it, but that's the gist of it.)
Of course, you can just get the component that does it from the page you linked to as well.
For another way to do it, and a fuller explanation, there's a full example with source code here: http://www.c-sharpcorner.com/uploadfile/rahul4_saxena/modal-popup-window-in-Asp-Net/
solution2
0 ACCPTED 2012-06-29 13:55:58
If you are looking for the exact code to popup a div box then here it is. Displaying the div box in the centre of the browser is harder, and will involve some more javascript to work out the centre.
Note the 'return false;' in the OnClientClick event of the button. This stops the button performing a postback and reloading the entire page.
<head runat="server">
<script type="text/javascript" language="javascript">
function togglePopUp(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'block') { el.style.display = 'none'; }
else { el.style.display = 'block'; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnPopUp" OnClientClick="togglePopUp('popUpDiv'); return false;"
text="Pop Up a div boxt" runat="server" />
</div>
<div id="popUpDiv"
style="
display:none;
position:absolute;
top:100px;
left:100px;
background-color:Gray;
z-index: 10002;">
My popup box
</div>
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.