Onload Fancy box using Jquery, yes it may harmful to web page. it is like a popup box. popup box is one of the most irritating thing in web designing and web development, but most of them need this script for their own, personal and e-commerce site.
It is very simple thing, it is similar like a alert script in java script. let see the coding for the Onload Fancy box using Jquery. here in the script the box will be open after 5 minutes of the page load.
CODE
<div class="fbox"> <div class="close">X</div> <img src="sample.jpg" width="250" height="250"> </div>
Just call the image and class="close" for close the image box. as the above code.
SCRIPT
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){boxOpen()},5000); function boxOpen(){ $('.fbox').fadeIn('slow'); } function boxClose(){ $('.fbox').fadeOut('slow'); } $('.close').click(function(){ boxClose(); }); }); </script>
Jquery min file is important one, and the setTimeout is to open the image or box within a sec. here i declare 5000, which means 5 sec. just used fadeIn and fadeOut concept for this.
CSS
<style> .fbox { width:250px; box-shadow:0 0 80px #333; border:15px solid #fff; margin:0 auto; margin-top:150px; margin-left:550px; position:fixed; z-index:1; display:none; } .close { padding:5px; color:#000; background-color:#fff; cursor:pointer; position:absolute; } </style>
i just fix the image in center of my browser, change it as your wish. position:fixed; is to fix the image in the same place while scrolling. i hope this may useful and interesting.
RELATED POST:
Onload Fancy box Using Jquery
ReplyDeletevery good
i test ok ,very work
thank you very much
good
ReplyDelete