kevinya

首先是按鈕，html裡面的按鈕，按下去之後就可以跳出開窗，以及關閉開窗的按鈕:

<button name="showModal" type="button" class="btn btn-success col-auto">開啟</button>
<button class="btn btn-primary" id="btnCloseModal" onclick="$('#divAuditCorrectModal').modal('hide')">關閉</button>
<!--隱藏的iis應用程式的路徑-->
<input type="hidden" id="hidAppPath" value="@Url.Content("~/")" />

接著於jquery綁定此按鈕的click事件:
由於本例子是把上面的按鈕放在DatatablesNet的Datatable裡面，所以下面js會有跟datatable相關的程式碼。

//開啟modal視窗：顯示稽核報表
$(document).on('click', 'button[name=showModal]', function (e) {
    e.preventDefault();
    var table = $('#example').DataTable();
    var tr = $(this).closest('tr');

    //取得此列的參數，用來傳遞參數到開窗
    var data = table.row(tr).data();

    console.log(data);

    //取得稽核表問題並顯示開窗
    GetMyAjaxContent(data.PlanAchieveDetailID, data.TemplateID);
    $("#divMyModal").modal('show');

})
function GetMyAjaxContent(planAchieveDetailID, templateID) {
    var appPath = $("#hidAppPath").val();
    return $.ajax({
        type: 'POST',

        url: appPath + 'MyController/GetMyAjaxContent/',
        data: {
            MyKey1: key1,
            MyKey2: key2,

        },

        success: function (resultData) {
            //顯示開窗
            console.log('成功取得db端的data：')
            console.log(resultData);
            //do something you want
            
            //顯示開窗
            $("#divMyModal").modal('show');
        },
        error: function (error) {
            console.log(error);
            alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');
        },
    });
}

Controller的c#程式碼如下：

[HttpPost]
public ActionResult GetMyAjaxContent(MyModel model)
{
	if (model == null)
	{
		return Json(new EmptyResult());
	}

	MyDbContext dal = new MyDbContext();
	var modalData = dal.DoMyBusinessLogic(model);

	return Json(modalData);

}

 以下是開窗div的html:
內容包含怎麼簡單排版開窗的html，關閉開窗的button長甚麼樣子…等等，內有許多註解，可自行參考

<div class="row">
   <!--
      「data-backdrop="static"」 鎖定背景，點擊背景時不自動關閉視窗
      「fade」 淡入、淡出的轉場效果
      「modal-lg」視窗大小，如modal-lg、modal-md、modal-sm
      「data-dismiss="modal"」 關閉視窗
      「data-keyboard="true"」 是否用ESC鍵關閉，預設為true
	  「modal-dialog-centered」將modal視窗置中於螢幕正中間，若移除此class，則modal視窗的位置會在螢幕的上方
      -->
   <div id="divMyModal" class="modal inmodal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
      <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header" style="width:100%;">
               <h5 class="modal-title text-center">我的大標題</h5>
               <input type="hidden" id="hidMyKey1" />
            </div>
            <div class="modal-body divCenterAlign" style="">
               <table border="1" class="table" width="100%" style="">
                  <tbody>
                     <tr class="d-flex">
                        <td class="col-1">表格的第一個td</td>
                        <td class="col-11">
                           <label id="lblMyLabel1" style="font-size:x-large"></label>
                        </td>
                     </tr>
                     <tr class="d-flex">
                        <td class="col-1">表格的第2個td</td>
                        <td class="col-11">
                           <label id="lblMyLabel2"></label>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
            <div class="modal-footer">
               <button class="btn btn-success" id="btnSave" onclick="Save()">儲存</button>                
               <button class="btn btn-primary" id="btnCloseModal" onclick="$('#divMyModal').modal('hide')">關閉</button>
            </div>
         </div>
      </div>
   </div>
</div>

要特別補充的是，上面提到的{「modal-lg」視窗大小，如modal-lg、modal-md、modal-sm}如果仍無法符合開窗大小的需求的話，就得要客製化開窗的寬度或高度，需搭配特殊css的css media query如下:

/*開窗的寬度寬一點，方便使用者填寫資料*/
@media (min-width: 768px) {
    .modal-xl {
        width: 95%;
        max-width: 1300px;
    }
}

 

最後開窗結果如下:

 

這篇大概是這樣…

參考資料：
工作經驗