Question

我想在当前网页上创建并显示一个自行设计的窗口而不是弹出窗口，如您在此页面上看到的那样 Open the link and click first "Demo" button on that page.

当我尝试在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 个答案: