Bootstrap 模态

<!-- jQuery Code (to Load Content via Ajax) -->
<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function() {
        // 将返回的 HTML 放入被选元素中
        $(this).find(".modal-body").load("remote.asp");
    });
});
</script>

<!-- 按钮 HTML (触发模态) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- 模态 HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 内容将从“remote.php”文件加载到这里 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript Code (to Load Content via Ajax) -->
<script>
// 定义从远程文件中获取内容的函数
function loadContent(url) {
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function() {
        // 处理服务器响应
        if(httpRequest.readyState === XMLHttpRequest.DONE) {
            if(httpRequest.status === 200) {
                updateModal(httpRequest.responseText);
            } else {
                alert("There was a problem with the request.");
            }
        }
    };

    httpRequest.open("GET", url, true);
    httpRequest.send();
};

// 定义函数以根据响应更新模态
function updateModal(response) {
    var myModal = document.getElementById("myModal");
	myModal.querySelector(".modal-body").innerHTML = response;

}

// 激活时以模态加载内容
document.addEventListener("DOMContentLoaded", function() {
    myModal.addEventListener("show.bs.modal", function() {
        loadContent("remote.asp");
    });
});
</script>

<!-- 按钮 HTML (触发模态) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- 模态 HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 内容将从“remote.php”文件加载到这里 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("#myModal").modal({
        backdrop: "static"
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
        backdrop: "static"
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myModal").modal({
        keyboard: false
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
        keyboard: false
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));
    
    btn.addEventListener("click", function() {        
        myModal.toggle();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));

    btn.addEventListener("click", function() {        
        myModal.show();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("hide");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {        
        myModal.hide();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#showText").click(function() {
        $("#textBlock").show();
        $("#myModal").modal("handleUpdate");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("showText");

    btn.addEventListener("click", function() {
        document.getElementById("textBlock").style.display = "block";
        var myModal = bootstrap.Modal.getInstance(document.getElementById("myModal"));
        myModal.handleUpdate();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myModal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        $("#myModal").modal("dispose");
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = bootstrap.Modal.getInstance(document.getElementById("myModal"));
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        myModal.dispose();
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = document.getElementById("myModal");
        var modal = bootstrap.Modal.getInstance(myModal);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getOrCreateInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = document.getElementById("myModal");
        var modal = bootstrap.Modal.getOrCreateInstance(myModal);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myModal").on("hidden.bs.modal", function() {
        alert("Modal window has been completely closed.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = document.getElementById("myModal");

    myModal.addEventListener("hidden.bs.modal", function() {
        alert("Modal window has been completely closed.");
    });
});
</script>

<script>
$(document).ready(function(){
    $("#myModal").on("hidePrevented.bs.modal", function(){
        alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = document.getElementById("myModal");

    myModal.addEventListener("hidePrevented.bs.modal", function() {
        alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
    });
});
</script>