jQuery是一項常用的JavaScript框架，已被廣泛應用于網站和應用程序開發。模態框是一種彈出式對話框，通常用于顯示給用戶重要的信息或者需要與用戶進行交互的內容。在現代Web開發中，jQuery和模態框結合的應用越來越普遍。

$(document).ready(function() {
// 獲取模態框對象
var modal = $('#myModal');
// 點擊按鈕打開模態框
$('#myBtn').click(function() {
modal.show();
});
// 點擊關閉按鈕或者模態框區域外的區域關閉模態框
$('.close, .modal-wrapper').click(function() {
modal.hide();
});
});

上述代碼演示了如何使用jQuery實現一個簡單的模態框。在文檔加載完成后，使用jQuery選擇器獲取模態框對象并賦值給一個變量。然后監聽打開模態框的按鈕，點擊后通過show()方法打開模態框。接著，監聽關閉按鈕和模態框區域外的區域，點擊后通過hide()方法關閉模態框。

模態框的樣式可以通過CSS進行自定義，如設置寬度、高度、顏色、陰影等等。在實際應用中，還可以結合Ajax技術動態加載模態框內容，以及通過JavaScript動態生成多個模態框。

// 動態生成模態框
var modal2 = $('
×
This is Modal 2
');
$('body').append(modal2);
// 監聽打開模態框2按鈕
$('#myBtn2').click(function() {
modal2.show();
});
// 監聽關閉模態框2按鈕和模態框區域外的區域
$('.modal-wrapper .close, .modal-wrapper').click(function() {
modal2.hide();
});

以上代碼演示了如何動態生成一個模態框，并對打開和關閉按鈕進行監聽。需要注意的是，動態生成的模態框需要通過append()方法添加到文檔中，同時也需要為它添加關閉按鈕和事件監聽。

通過jQuery和模態框的結合，可以實現一些非常實用的功能，如表單驗證模態框、提示信息模態框、登錄注冊模態框等等。當然，也需要注意模態框的使用場景和交互設計，提供優秀的用戶體驗。