如何在當前網頁上創建並顯示一個自行設計的窗口，而不是彈出窗口？

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