0

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

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

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

4

2 回答 2

0

如果您使用的是 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/

于 2012-06-29T13:34:00.400 回答
0

如果您正在寻找弹出 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>
于 2012-06-29T13:55:58.797 回答