javascript 關閉按鈕

JavaScript 關閉按鈕運用及其實作

在網頁設計中，有時我們需要在彈出視窗或模態方塊中新增一個關閉按鈕，讓使用者可以隨時關閉視窗。這篇文章將介紹如何使用 JavaScript 來實現關閉按鈕的功能。

一、使用HTML 程式碼建立關閉按鈕

在HTML 程式碼中，我們可以使用<button> 標籤建立一個關閉按鈕，其程式碼如下：

<button onclick="closeWindow()">关闭窗口</button>

其中，onclick 屬性會在按鈕被點擊時觸發某個函數。我們需要在 JavaScript 中定義 closeWindow() 函數，以實現關閉視窗的功能。

二、使用 Window 物件關閉視窗

在 JavaScript 中，我們可以使用 Window 物件來關閉目前視窗或開啟的子視窗。以下是兩個實作方式：

1. 使用window.close() 方法來關閉目前視窗：

function closeWindow() {
    window.close();
}

注意：window .close() 方法只能關閉由JavaScript 開啟的視窗。如果目前視窗是使用者開啟的，則該方法將不起作用。

2. 使用window.opener 屬性來關閉父視窗或開啟的子視窗：

function closeWindow() {
    window.opener=null;
    window.open('','_self');
    window.close();
}

在這個範例中，我們首先將window.opener 設為null，以確保關閉的視窗不會再次自動開啟其父視窗。接著我們使用window.open() 方法來開啟一個空白窗口，這個方法的第一個參數為要開啟的URL，由於我們不需要開啟任何網址，所以傳入了一個空字串。第二個參數為視窗名稱，這裡使用了 _self，表示在目前視窗中開啟一個新網頁。最後我們使用 window.close() 方法來關閉目前視窗。

三、在jQuery 中實作關閉按鈕

如果我們使用jQuery 來編寫JavaScript 程式碼，可以使用以下兩種方式來實作關閉按鈕的功能：

1. #使用window.close() 方法來關閉目前視窗（同上）：

function closeWindow() {
    window.close();
}

2. 在jQuery 中模擬視窗關閉事件：

function closeWindow() {
    var windowEvent = jQuery.Event('beforeunload');
    $(window).trigger(windowEvent);

    if (!windowEvent.isDefaultPrevented()) {
        window.close();
    }
}

在這個例子中，我們首先定義了一個模擬的視窗關閉事件。接著使用 jQuery 的 trigger() 方法來觸發該事件，這將會執行所有已註冊到該事件的處理程序。如果處理程序無阻止事件的預設行為，則會執行 window.close() 方法來關閉目前視窗。

總結：

本文介紹了在 JavaScript 和 jQuery 中如何實作關閉按鈕。無論你是透過 window.close() 方法來關閉視窗還是模擬視窗關閉事件，都需要記得在程式碼中明確定義你的關閉行為，並將其告知使用者。

以上是javascript 關閉按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！