So we want something that pops up when the user is about to leave or to enter the email when subscription box opens on our blog? So we are making that with a Javascript framework called Sweet Alert. Sweet Alert is a better way to display output to the user rather than to use the usual JavaScript alert();.
So for that, first we need to add the SweetAlert's JavaScript file into our document. So we use their CDN to get the file. Add the below script into the head section of the document.
Now, its time to get in our HTML. For example, if you want to make the Facebook page linking handle to be popped up, go to Facebook Developer's social plugin, and then paste the URL of your Facebook page and click on get the code. If you prefer the iframe, the code will look something like below(Excluding page URL).
Copy the code. Now its time to set up the alert!
Now we will add the above Facebook iframe script.You can also add some other stuff like twitter follow etc.So the final script will look something like this.
But you may face a problem with this and that is that facebook's iframe takes a ittle time more to load.For that we can use a preload in HTML.So we are going to use it like below.
So with that you can add simple alert box to your blog or website!Do experiment with it and with that, don't forget to like our Facebook page.
Have a Look at Demo once!
So for that, first we need to add the SweetAlert's JavaScript file into our document. So we use their CDN to get the file. Add the below script into the head section of the document.
<script src="https://unpkg.com/sweetalert2@7.22.2/dist/sweetalert2.all.min.js"></script>
Now, its time to get in our HTML. For example, if you want to make the Facebook page linking handle to be popped up, go to Facebook Developer's social plugin, and then paste the URL of your Facebook page and click on get the code. If you prefer the iframe, the code will look something like below(Excluding page URL).
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz&tabs=timeline&width=1200&height=70&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="1200" height="70" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
Copy the code. Now its time to set up the alert!
Applying the SweetAlert
Now, add the following code on your main page.swal({ title: "<i>Like Or Facebook Page!</i>", html: '', confirmButtonText: "Liked!", });You can modify this by changing the heading and button text.
Now we will add the above Facebook iframe script.You can also add some other stuff like twitter follow etc.So the final script will look something like this.
swal({ title: "<i>Like Or Facebook Page!</i>", html: '<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz&tabs=timeline&width=1200&height=70&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="inherit" height="inherit" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>', confirmButtonText: "Liked!", });
But you may face a problem with this and that is that facebook's iframe takes a ittle time more to load.For that we can use a preload in HTML.So we are going to use it like below.
<link rel="preload" href="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz" as="document"">
Have a Look at Demo once!
0 Please Share a Your Opinion.:
Comment something useful and creative :)