HTML彈出框是Web設計中常用的一種交互控件，可以讓網頁更加人性化、靈活。但是如果只是使用默認樣式的彈出框，顯然是不夠美觀的。那么如何設置HTML彈出框的樣式呢？下面通過幾種常見的方式來介紹。 首先，可以使用CSS樣式表來設置彈出框的外觀。比如設置彈出框的背景色、字體顏色、邊框樣式等等。示例代碼如下：

.popup{
background-color: #FFF;
color: #333;
border: 1px solid #555;
padding: 10px;
}

上述代碼中，.popup是自定義的類名，可以根據需要進行修改，padding表示設置內邊距為10像素。 其次，可以使用JavaScript代碼來動態設置彈出框的樣式。比如在點擊按鈕時，使彈出框的背景色變為紅色。示例代碼如下：

document.getElementById("myButton").onclick = function(){
var popup = document.getElementById("myPopup");
popup.style.backgroundColor = "red";
popup.style.color = "#FFF";
popup.style.border = "none";
}

上述代碼中，myButton是自定義按鈕的id，myPopup是自定義彈出框的id。當按鈕被點擊時，通過document.getElementById()方法獲取彈出框元素對象，然后設置其背景色、字體顏色和邊框樣式等。 最后，還可以使用第三方JavaScript庫來快速創建具有美觀樣式的彈出框。比如Bootstrap框架中的Modal插件，可以根據需要靈活配置其顏色、大小、位置等。示例代碼如下：

Launch demo modal
Modal title
×
Modal content...
CloseSave changes

上述代碼中，使用了Bootstrap框架中的Modal插件，包含了彈出框的標題、內容、操作按鈕等。只需要在頁面中引入相關的CSS和JavaScript文件，并按照官方文檔進行配置即可。 總之，HTML彈出框的樣式設置是非常靈活的，可以使用CSS、JavaScript、第三方庫等多種方式進行配置，提高用戶體驗和網站的美觀程度，是Web設計中不可缺少的一項技能。