在页面加载时加载Javascript
[英]Load Javascript on page load
问题描述
How can I load this javascript modal on page load? 
如何在页面加载时加载此JavaScript模式？ It's from the plugin "sweet alert". 来自插件“ sweet alert”。 I'm really bad with javascript. 我真的对JavaScript很不好。 Any advice will surely help! 任何建议一定会有所帮助！
<script>
$(function () {
$('.demo1').click(function(){
swal({
title: "Welcome in Alerts",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
});
});
});
4 个解决方案
解决方案1
3 已采纳 2017-02-01 04:39:46
Since you are using jquery you can use document.ready to wrap your code 由于您正在使用jquery，因此可以使用document.ready包装代码
<script>
$(document).ready(function() {
$('.demo1').click(function() {
swal({
title: "Welcome in Alerts",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
});
});
})
</script>
Now if you are putting this snippets near the closing body you can avoid document.ready 现在，如果将这些代码片段放在关闭的body附近，则可以避免document.ready
<body>
//rest of the dom element
<script>
$('.demo1').click(function() {
swal({
title: "Welcome in Alerts",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
});
});
</script>
</body>
解决方案2
0 2017-02-01 04:34:10
Assuming swal() is what opens your modal, simply move it outside your click event. 假设swal()是打开模态的原因，只需将其移动到click事件之外。 Your current code only runs the swal() function once the element with the .demo1 class has been clicked. 一旦单击了带有.demo1类的元素，您当前的代码将仅运行swal()函数。 By moving it outside the click handler function, it gets run as soon as the page is ready. 通过将其移到单击处理程序函数之外，它可以在页面准备好后立即运行。
$(function() {
swal({
title: 'welcome',
text: 'ding!'
});
});
解决方案3
0 2017-02-01 04:39:39
$(function(){ $('button').click(function(){ swal("Oops! you clicked me.") }) });
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <button>Click me</button>
In-order to run the sweetalert you first need to call it's resources and also load the jQuery like below. 为了运行sweetalert您首先需要调用它的资源，并像下面那样加载jQuery 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</body>
</html>
$(function(){ swal("Hi! I'm loaded on doc ready."); })
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
解决方案4
0 2017-02-01 04:56:13
<script>
$(document).ready(function(){
swal({
title: "Welcome in Alerts",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
});
});
</script>
just add this above script , this will trigger your sweet alert on the page load. 只需添加上面的脚本，这将在页面加载时触发您的甜蜜警报。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.