如何使用外部js文件进行模态工作？
[英]how to work modal using external js file?
问题描述
I wrote some javascript code to show a modal after page load and click a button to redirect another url. 
我写了一些JavaScript代码来显示页面加载后的模式，然后单击一个按钮来重定向另一个URL。 That worked fine. 很好。 But now I need it to be done with an external javascript file. 但现在我需要使用外部javascript文件来完成此操作。 Thanks in advance. 提前致谢。 Here is what I did: 这是我所做的：
<!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>
How do I do this with an external javascript file? 如何使用外部javascript文件执行此操作？
3 个解决方案
解决方案1
0 2017-04-09 20:08:10
Copy everything in you <script> tag and put it in an external js file. 复制您<script>标记中的所有内容并将其放入外部js文件中。 You can link this file in your html with the following: 您可以在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>
解决方案2
0 已采纳 2017-04-09 20:09:44
Just create a new file with '.js' extension. 只需创建一个扩展名为“ .js”的新文件即可。 example: create 'scripts.js' 示例：创建“ scripts.js”
and write : 和写 ：
$(document).ready(function(){
$("#myModal").modal('show');
});
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
and then in the html file before add: 然后在html文件中添加之前：
you need to add correct file to the file in 'src' attribute'. 您需要在“ src”属性中的文件中添加正确的文件。
解决方案3
0 2017-04-09 21:06:14
脚本“ js文件”必须添加在结束body标签之前
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.