Reputation: 37
How can I load this javascript modal on page load? It's from the plugin "sweet alert". I'm really bad with 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."
});
});
});
Upvotes: 1
Views: 2888
Reputation: 264
<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.
Upvotes: 0
Reputation: 50346
Since you are using jquery you can use document.ready
to wrap your code
<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>
//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>
Upvotes: 4
Reputation: 6656
$(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.
<!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>
Upvotes: 0
Reputation: 91722
Assuming swal()
is what opens your modal, simply move it outside your click event. Your current code only runs the swal()
function once the element with the .demo1
class has been clicked. By moving it outside the click handler function, it gets run as soon as the page is ready.
$(function() {
swal({
title: 'welcome',
text: 'ding!'
});
});
Upvotes: 0