Question

我在从Javascript到另一个剃刀文件中加载Bootstrap弹出窗口时遇到问题。我仅用2个html（非剃须刀）文件和一个js文件创建了以下文件，以显示我要完成的工作。我可以调用与索引文件位于同一文件中的myPopup2，但不能调用位于单独文件中的myPopup2。

我需要从附带的javascript加载任何模式弹出窗口吗？

$(document).ready(function(){
    $("#myModal").modal('show');

    $(".modal").on("hidden.bs.modal", function () {
        // $("#myPopup").modal('show');
        $("#myPopup2").modal('show');
    });

});

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Pop Up 2</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <script src="script.js"></script>
    

</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Here is your message Title</h4>
            </div>
            <div class="modal-body">
                <p>Here is your message details</p>
            </div>
        </div>
    </div>
</div>

<div id="myPopup2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Here is your message Title</h4>
            </div>
            <div class="modal-body">
                <p>Here is My Popup</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Pop Up</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <script src="script.js"></script>
    

</head>
<body>
<div id="myPopup" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Here is your message Title</h4>
            </div>
            <div class="modal-body">
                <p>Here is My Popup</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

从外部JavaScript调用Bootstrap弹出窗口

0 个答案: