Вызов всплывающего окна Bootstrap из внешнего JavaScript - PullRequest
Новая
       8

Вызов всплывающего окна Bootstrap из внешнего JavaScript

0 голосов
/ 15 сентября 2018

У меня проблемы с загрузкой всплывающего окна Bootstrap в другом файле бритвы из javascript. Я создал следующее, используя всего 2 html (не бритвенных) файла и js-файл, чтобы показать, чего я пытаюсь достичь. Я могу вызвать myPopup2, который находится в том же файле, что и мой индексный файл, но не myPopup, который находится в отдельном файле.

Что мне нужно, чтобы загрузить модальное всплывающее окно из прикрепленного 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>
...