項目中有時候涉及到彈窗問題，如點選“新增按鈕”會有彈窗界面，然後填寫資訊并儲存等需求；而且樣式得滿足一定的要求，如窗體高亮背景灰暗等。
以下是我平時項目開發中遇到的一些彈窗問題的小小總結和分享，工作平台是Visual Studio 2017。技術有限，如有不對或者不完善的地方歡迎留言讨論，謝謝。
案例：
如圖所示，點選“新增”按鈕，彈出紅色圈内的白色高亮彈窗，其餘部分是背景，均為灰色顯示。
代碼如下：
1.點選前台button按鈕，根據id “btnInsert2”觸發js部分
<button type="button" class="btn btn-primary" aria-label="Left Align" id="btnInsert2">
<span class="glyphicon glyphicon-import" aria-hidden="true"></span> 新增
</button>
2.js主要關鍵句即為如下語句
$("#btnInsert2").click(function () {
$('#btnUpload2').modal('show');
});
3."btnUpload2"即為前台彈窗主體部分對應的id，（注意aria-hidden="true"，預設彈窗是隐藏的）如下
<!--新增需求-->
<div class="modal fade" id="btnUpload2" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">
<span id="title">新增需求</span>
</h3>
</div>
<div class="modal-body">
<table>
<tr>
<td style="margin-right:10px;">
<table>
<tr>
<td>需求主題：<textarea id="new_req_name" name="new_req_name" rows="2" cols="40"></textarea></td>
</tr>
<tr>
<td>需求描述：<textarea id="new_req_desc" name="new_req_desc" rows="10" cols="66"></textarea></td>
</tr>
<tr>
<td>提案人員：<input id="new_req_raiser" type="text" name="new_req_raiser" /></td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
提案廠區：<select style="width:180px" name="new_req_plant" id="new_req_plant">
<option value>請選擇</option>
<option value="ACN">ACN</option>
<option value="ACSC">ACSC</option>
<option value="RMA">RMA</option>
<option value="SGA">SGA</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<optionvalue=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
提案時間：<input style="width:180px" id="new_raise_dt" class="taskadds" type="date" />
</td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
負責人 ：<select style="width:180px" name="new_req_userid" id="new_req_userid">
<option value>請選擇</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
預計完成：<input style="width:180px" id="new_req_pfinish_dt" class="taskadds" type="date" />
</td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
程式名稱：<input style="width:495px" id="new_req_proname" type="text" name="new_req_proname" />
</td>
</tr>
<tr>
<td>
<div style="height:5px">
</div>
備注：<textarea id="new_remark" name="new_remark" rows="5" cols="66"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height:5px">
</div>
<div class="rows" style="text-align:right">
<button type="button" class="btn btn-primary" aria-label="Right Align" id="btnSave">
<span class="glyphicon glyphicon-import" aria-hidden="true"></span> 儲存
</button>
<input type="file" id="file" name="file" accept=".xls,.xlsx" style="display:none" />
</div>
</div>
</div>
</div>
</div>
4.有時候彈窗會有異常，一般會再在js主體代碼同級處添加如下代碼，然後就好了
$("#btnInsert2").click(function () {
$('#btnUpload2').modal('show');
$("#new_raise_dt").val(new Date().format("yyyy-MM-dd"));
});
//模式窗打開事件
$('#btnUpload2').on('show.bs.modal', function () {
});
//模式窗關閉事件
$('#btnUpload2').on('hide.bs.modal', function () {
});
5.最後在你儲存完資訊後，需要關閉彈窗窗體，js處添加如下代碼即可
$("#btnUpload2").modal('hide');
6.樣式檔案主要用到的是“bootstrap.min.css”，以下是百度雲下載下傳位址
連結：https://pan.baidu.com/s/1ZDjobSCDA-a5kMw2zB6vMQ
提取碼：hxlq
7.附加：有時候樣式會出現大大小小的問題，可以自己在官網的css檔案中進行自定義修改，如下幾個可能你會用到
1）在窗體部分的html元素裡面，如有寬度等常見元素控制不了時，可以在css檔案中添加強制控制，後面加上“!important”即可如下：
.fade.in {
opacity: 1;
padding-right: 20px !important;
}
2）根據螢幕分辨率選擇相應樣式控制：
@media (min-width: 1367px) { /*大于等于1366px*/
}
@media (max-width:1366px) { /*小于等于1366px*/
}
8.其他彈窗問題以後遇到會繼續添加，歡迎讨論，謝謝。
![對于VS中scanf報錯永久解決，建立源檔案自動添加#define _CRT_SECURE_NO_WARNINGS 1[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)