如何在当前网页上创建并显示一个自行设计的窗口，而不是弹出窗口？
[英]How can i create and display a self designed window on current webpage instead of popup?
问题描述
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. 当我尝试在接受我的链接的stackoverflow这个问题上放置一个链接时，出现了相同类型的窗口。
for example facebook also uses this type of window to display tagged images. 例如，facebook也使用这种类型的窗口来显示标记的图像。 please help me. 请帮我。
2 个解决方案
解决方案1
0 2012-06-29 13:34:00
If you're using ASP.NET, that functionality is available in the Ajax Control Toolkit . 如果使用的是ASP.NET，则可以在Ajax Control Toolkit中使用该功能。
It's also possible to do it using straight up HTML and JavaScript. 也可以直接使用HTML和JavaScript来实现。
You simply create a div with the content that you want in the pop-up, and set its "Display" property to "none". 您只需在弹出窗口中使用所需内容创建一个div，然后将其“ Display”属性设置为“ none”。
Upon user interaction (mouse click, button click, etc) use JavaScript to set the Display to "block". 在用户交互（鼠标单击，按钮单击等）后，使用JavaScript将显示设置为“阻止”。 (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/ 有关执行此操作的另一种方法以及更完整的说明， 请参见此处的完整示例，其中包含源代码： http : //www.c-sharpcorner.com/uploadfile/rahul4_saxena/modal-popup-window-in-Asp-Net/
解决方案2
0 已采纳 2012-06-29 13:55:58
If you are looking for the exact code to popup a div box then here it is. 如果您正在寻找弹出div框的确切代码，那么这里就是。 Displaying the div box in the centre of the browser is harder, and will involve some more javascript to work out the centre. 在浏览器的中心显示div框会比较困难，并且将需要更多的JavaScript来计算中心。
Note the 'return false;' 注意“ return false”； in the OnClientClick event of the button. 在按钮的OnClientClick事件中。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.