Javascript非模式對話框是一種用戶與瀏覽器進行交互的方式。它由開發者自己編寫代碼創造出來，因此控制和自定義程度非常高。相較于模式對話框，非模式對話框不會阻止用戶與瀏覽器交互，因此能更好地提升用戶體驗。

下面我們將使用一個簡單的例子來說明如何創建一個基本的非模式對話框。我們來創建一個彈窗，讓用戶可以輸入自己的名字，然后輸出“您好，xxx，歡迎來到我們的網站！”。

<code>let userName = prompt("請輸入您的名字：");
alert("您好，" + userName + "，歡迎來到我們的網站！");
</code>

如上所示，我們先用prompt方法獲取用戶輸入的名字，并將獲取到的名字存儲在變量userName中。然后，我們使用alert方法將“您好，xxx，歡迎來到我們的網站！”這句話彈出。其中，我們使用了字符串拼接的方式將輸入的名字嵌入到提示語中。

除了上面這種簡單的方式之外，我們還可以創建自己的非模式對話框，以實現更豐富的交互效果。下面是一個比較復雜的例子。

<code>let dialog = document.createElement("div");
dialog.style.position = "fixed";
dialog.style.top = "0";
dialog.style.left = "0";
dialog.style.width = "100%";
dialog.style.height = "100%";
dialog.style.backgroundColor = "rgba(0,0,0,0.5)";
document.body.appendChild(dialog);
let content = document.createElement("div");
content.style.position = "absolute";
content.style.top = "50%";
content.style.left = "50%";
content.style.width = "400px";
content.style.height = "200px";
content.style.marginTop = "-100px";
content.style.marginLeft = "-200px";
content.style.backgroundColor = "#fff";
content.style.borderRadius = "10px";
content.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
let title = document.createElement("div");
title.style.height = "50px";
title.style.lineHeight = "50px";
title.style.backgroundColor = "#3dbd7d";
title.style.textAlign = "center";
title.style.color = "#fff";
title.style.borderTopLeftRadius = "10px";
title.style.borderTopRightRadius = "10px";
title.innerHTML = "非模式對話框";
let closeBtn = document.createElement("span");
closeBtn.style.position = "absolute";
closeBtn.style.right = "0";
closeBtn.style.top = "0";
closeBtn.style.width = "30px";
closeBtn.style.height = "30px";
closeBtn.style.textAlign = "center";
closeBtn.style.lineHeight = "30px";
closeBtn.style.backgroundColor = "#f00";
closeBtn.style.color = "#fff";
closeBtn.style.borderRadius = "50%";
closeBtn.style.cursor = "pointer";
closeBtn.innerHTML = "×";
closeBtn.onclick = function () {
document.body.removeChild(dialog);
}
let input = document.createElement("input");
input.style.display = "block";
input.style.width = "80%";
input.style.margin = "20px auto";
input.style.padding = "10px";
input.style.border = "1px solid #ccc";
input.style.boxSizing = "border-box";
let btn = document.createElement("button");
btn.innerHTML = "確定";
btn.style.display = "block";
btn.style.width = "100px";
btn.style.height = "40px";
btn.style.margin = "20px auto";
btn.style.backgroundColor = "#3dbd7d";
btn.style.color = "#fff";
btn.style.border = "none";
btn.style.borderRadius = "5px";
btn.style.cursor = "pointer";
btn.onclick = function () {
alert("您好，" + input.value + "，歡迎來到我們的網站！");
document.body.removeChild(dialog);
}
content.appendChild(title);
content.appendChild(closeBtn);
content.appendChild(input);
content.appendChild(btn);
dialog.appendChild(content);
</code>

如上所示，我們首先使用createElement方法分別創建了dialog、content、title、closeBtn、input、btn等元素。其中，dialog是半透明的背景層，用于遮蓋住頁面，讓用戶能夠專注于當前的交互過程；content則包含了彈窗的所有元素，包括標題、關閉按鈕、輸入框以及確定按鈕；title是彈窗的標題；closeBtn是關閉按鈕，用于關閉彈窗；input是輸入框；btn是確定按鈕。我們使用了大量的CSS樣式，為這些元素設置了位置、尺寸、顏色、邊框、圓角等屬性，使得它們能夠組合成一個美觀、實用的彈窗。

在btn的onclick事件中，我們使用alert方法將“您好，xxx，歡迎來到我們的網站！”這句話彈出。其中，我們使用了字符串拼接的方式將輸入的名字嵌入到提示語中。最后，我們調用了document.body.removeChild(dialog)方法，將彈窗從頁面中移除，以恢復用戶正常的瀏覽體驗。

總的來說，Javascript非模式對話框是一種非常實用的交互方式。它不僅能夠提升用戶體驗，還能夠為網站注入更多的個性化元素。如果你還沒有體驗過Javascript非模式對話框，那么現在就去嘗試一下吧！