在Web應用程序中,可以使用一些技術來模擬window.showModalDialog效果,比如使用彈出框插件或者自定義模態框。
例子:
<!-- 引入Bootstrap CSS和JS文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 創建一個按鈕來觸發模態框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打開模態框
</button>
<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">模態框標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 模態框內容 -->
<p>這里是模態框內容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
例子:
<button onclick="openModal()">打開模態框</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p>這里是模態框內容</p>
<button>保存</button>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
</script>
<style>
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
}
.modal-content {
max-width: 300px;
margin: auto;
}
.close {
float: right;
cursor: pointer;
}
</style>
以上是兩種實現模擬window.showModalDialog效果的方法,可以根據實際需求選擇合適的方式來使用。