Question

我写了一些javascript代码，在页面加载后显示模态，然后单击按钮重定向另一个url。这工作得很好。但现在我需要用外部javascript文件完成它。提前致谢。这是我做的：

        <!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 type="text/javascript">
        $(document).ready(function(){
            $("#myModal").modal('show');
        });
    </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>

                    <a  href="https://www.fiverr.com/" type="button" class="btn btn-default">Exit</a>

            </div>
        </div>
    </div>
</div>
<script>
    $(".modal").on("hidden.bs.modal", function () {
        window.location = "https://www.google.com/";
    });

</script>
</body>
</html>

如何使用外部javascript文件执行此操作？

Answer 1

复制<script>标记中的所有内容并将其放入外部js文件中。您可以使用以下内容在html中链接此文件：

<script src="js/YourJSFile.js"></script>

$(document).ready(function(){
    $("#myModal").modal('show');

    $(".modal").on("hidden.bs.modal", function () {
        window.location = "https://www.google.com/";
    });

});

        <!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="js/YourJSFile.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>

                    <a  href="https://www.fiverr.com/" type="button" class="btn btn-default">Exit</a>

            </div>
        </div>
    </div>
</div>

</body>
</html>

Answer 2

只需使用＆＃39; .js＆＃39;创建一个新文件延期。例如：创建＆＃39; scripts.js＆＃39;

并写：

$(document).ready(function(){
    $("#myModal").modal('show');
});

$(".modal").on("hidden.bs.modal", function () {
    window.location = "https://www.google.com/";
});

然后在html文件中添加：

您需要将正确的文件添加到＆＃39; src＆＃39;中的文件中。属性＆＃39;

Answer 3

必须在结束体标记

之前添加

脚本“js文件”

如何使用外部js文件工作模式？

3 个答案: