[Help] html popup
2015-11-21, 01:02 AM,
#1
Hi,

I need a simple html popup script that will let me popup ads on my website.
After hours of searching, I can't believe I can't find one good, simple solution for me.

1. I need something that loads on page-load (after a delay of a few secs) [and not on link/image-click]
2. Will allow me to load content via iFrame (i.e not inline content, preferably)
3. Smooth, fast & clean looking - preferably one like the jQuery lightbox popups which look so cool.

All the modal pop-ups I find online load only on link-clicks. I was trying Magnific-popups, but customizing it to my needs seems too difficult. Right now, I have managed to load a test page as a popup - but the size of the popup is full-screen and it looks horrible.

If somebody can just give me code where - all I do is - add the href for the popup content and add the code to my website, I would be really thankful.

Thanks.
Reply
Share This Thread :

2015-11-21, 01:47 AM, (This post was last modified: 2015-11-21, 05:25 AM by t4nk.)
#2
Updated using iframe fade in after load

...the important part in the code is the inline js code, first line " $( window ).load(function() { " which tells the code inside following {} to fire only after the page loads. change "http://cpagrip.com" to whatever url you need and you can style the iframe however you want. in the javascript inline code, the "1000" is the timing in ms of the fadeIn, and the 3000 is for the delay. edit it however you want. save contents of code below as .html file and run it to see how it looks. Don't forget to click "Thanks" if this helps you out :)
[hide]
Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">


<style>
                
                      #but{display:none;
                      margin-right:36%;
                      float:right;}
                      #ifrm{
                      display:none;
                          
                          }
                          iframe{
                              height:300px !important;
                              width:500px !important;
                              }
                                  
</style>
<!-- Latest compiled and minified JavaScript -->
<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.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    
    <script>
    
        $( window ).load(function() {
        setTimeout(function() {
        $("#ifrm").html("<iframe src='http://cpagrip.com' height='300px' width='500px'></iframe>");
        $('#ifrm').fadeIn(1000);
        $('#but').fadeIn(1000);
        },3000);
        }
    );  
</script>    
    <script>
    function closeifrm() {
    $('#ifrm').fadeOut(1000);
    $('#but').fadeOut(1000);
    }
    </script>
</head>
<body>
<center>
<div id="ifrmdiv">
    <div id="ifrm">
   </div>
   <button type="button" id="but" class="close" onClick="return closeifrm()">X</button>
        
      
    
    </div>
   </center>


</body>
</html>
[/hide]
Reply
2015-11-21, 06:20 AM,
#3
(2015-11-21, 01:47 AM)t4nk Wrote: Updated using iframe fade in after load

...the important part in the code is the inline js code, first line " $( window ).load(function() { " which tells the code inside following {} to fire only after the page loads. change "" to whatever url you need and you can style the iframe however you want. in the javascript inline code, the "1000" is the timing in ms of the fadeIn, and the 3000 is for the delay. edit it however you want. save contents of code below as .html file and run it to see how it looks. Don't forget to click "Thanks" if this helps you out :)

Thanks a looot. This is just what I was looking for.
Reply
2015-11-21, 06:16 PM,
#4
if you're using wordpress, look up popup plugins and you'll find a ton that will let you do this.
Reply


Related Threads
Thread Author Replies Views Last Post
  How to put HTML landing page script in blogger walterzingo 4 453 2018-02-03, 06:55 PM
Last Post: umberblue
  Where should I put <script> tags in HTML? Pirata 5 500 2017-12-03, 11:38 AM
Last Post: Pirata
  Help converting Instapage to HTML Leo 4 621 2017-04-19, 07:25 PM
Last Post: EnChanter
  [Urgent] Help With HTML (Form to Email) IndeXer 5 374 2017-02-01, 01:55 AM
Last Post: IndeXer
  How to make html (php) file loads random js files every time reloading the page? immart247 8 564 2017-02-01, 01:47 AM
Last Post: CharlieHarper





About Us | Contact Us | CPA Elites | Advertise | Stats

© 2013-2018 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top