如何在当前网页上创建并显示一个自行设计的窗口，而不是弹出窗口？

Question

我想在当前网页上创建并显示一个自行设计的窗口，而不是在此页面上看到的弹出窗口。打开链接，然后单击该页面上的第一个“演示”按钮。

当我尝试在接受我的链接的stackoverflow这个问题上放置一个链接时，出现了相同类型的窗口。

例如，facebook也使用这种类型的窗口来显示标记的图像。 请帮我。

Answer 1

如果使用的是ASP.NET，则可以在Ajax Control Toolkit中使用该功能。

也可以直接使用HTML和JavaScript来实现。

您只需在弹出窗口中使用所需内容创建一个div，然后将其“ Display”属性设置为“ none”。

在用户交互（鼠标单击，按钮单击等）后，使用JavaScript将显示设置为“阻止”。 （还有更多内容，但这就是要点。）

当然，您也可以从链接到的页面上获取执行该操作的组件。

有关执行此操作的另一种方法以及更完整的说明，请参见此处的完整示例，其中包含源代码： http : //www.c-sharpcorner.com/uploadfile/rahul4_saxena/modal-popup-window-in-Asp-Net/

Answer 2

如果您正在寻找弹出div框的确切代码，那么这里就是。 在浏览器的中心显示div框会比较困难，并且将需要更多的JavaScript来计算中心。

注意“ return false”； 在按钮的OnClientClick事件中。 这将停止执行回发并重新加载整个页面的按钮。

<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>

如何在当前网页上创建并显示一个自行设计的窗口，而不是弹出窗口？

问题描述

2 个解决方案

解决方案1
0 2012-06-29 13:34:00

解决方案2
0 已采纳 2012-06-29 13:55:58

如何在当前网页上创建并显示一个自行设计的窗口，而不是弹出窗口？

问题描述

2 个解决方案

解决方案1 0 2012-06-29 13:34:00

解决方案2 0 已采纳 2012-06-29 13:55:58

解决方案1
0 2012-06-29 13:34:00

解决方案2
0 已采纳 2012-06-29 13:55:58