[Mvc]簡單的確認訊息彈出視窗 confirmModal

[Mvc]簡單的確認訊息彈出視窗 confirmModal

- 8月 25, 2021

需求:

跳出可以自訂樣式的視窗，而不是用alert()的方式顯示訊息。

實作:

view

在view加上自訂的訊息Modal，並寫一個button，新增click事件來測試是否有用。

<div>

<button onclick="ShowMessage('你想要傳的訊息');">

開啟確認訊息

</button>

</div>

@*訊息Modal*@

<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header" id="confirmcontext">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 id="confirmTitle" class="semi-bold">訊息</h4>

</div>

<div id="confirmBady" class="modal-body land-inline-striped"></div>

<div class="modal-footer text-left">

<button type="button" id="confirmYes" class="btn btn-primary" data-dismiss="modal">確認</button>

<button type="button" id="confirmNo" class="btn btn-default" data-dismiss="modal" hidden>取消</button>

</div>

</div>

</div>

</div>

引用的javaScript

<script>

function ShowMessage(message) {

$("#confirmModal").modal("show");

$("#confirmBady").text(message);

}

</script>

效果:

Git支援:

https://github.com/scottHsuHGIGA/ComfirmModal

留言