Help with a popover (in the same window) without onClick

JavaScript
1

I have created newsletter signup forms that I would like to display on (within) the page as a popover.

Ex.: Visitor goes to a page of recipes, I would like to offer them more recipes in exchange for email signup. So, on that same page, a popover (or lightbox, perhaps) shows this offer.

All examples of code that I can find include an “onClick” function (or have been deprecated). I do not want my visitor to have to click anything for the popover to show. Just a delay of X seconds.

Again, I have coded the forms. I just need help with the script of the popover.

***I have used the term ‘popover’ instead of popup, as I do not care for the traditional ‘popups’. Maybe this terminology is incorrect.

Any and all help is appreciated!

Thanks!

2

setTimeout is what you are looking for.

Example:

<div id="notice"></div>
<script>
	var notice = document.getElementById('notice'),
		t = setTimeout("showMsg()",2000);
		
	var showMsg = function() {
		notice.innerHTML = '<p>Hello World</p>';
	}			
</script>
3

Indeed, and thank you! Can’t believe I didn’t think of that.

Enjoy your weekend.

4

Hey, thanks again with this. I am still having trouble accomplishing this goal, however. I cannot get the <div> information to show up. There are several errors due to the markup.

To explain: I don’t need a single line of text, I need an entire signup form.

Ex.: I need all of #pop_form_wrapper to show in the popover where “<p>This is your popover!</p>” is. (see below)

<div id="pop_form_wrapper">
  <div class="pagecopy">
  <p class="bigfont">Want to get all of our recipes in a handy <span>eBook?</span><br/>
  Just signup for our newsletter and they're yours.
  <span class="biggerfont">FREE!</span></p>
  <img src="images/pop_form_crescent.png" class="crescent" width="99" height="25" />
  <p>At Domain.com we have collected the best of our family recipes, and even created some new palate pleasers, and would like to offer them to you...FREE!  Just signup for our newsletter using the form below, and we'll email it right to you.</p>
  <p class="mediumfont"><span>But, wait.  There's more!</span></p>
  <p>By subscribing to our newsletter, you'll also receive coupons and other offers to use here on our site!  It doesn't get any better than that.</p>
  </div><!-- end .pagecopy  -->  
  
  <!--  Pop Form -->
Sign up FORM GOES HERE
  <!-- / Pop Form -->
</div><!-- end #pop_form_wrapper -->



<div id="notice"></div>
<script type="text/javascript">
       var notice = document.getElementById('notice'),
               t = setTimeout("showMsg()",5000);

       var showMsg = function() {
               notice.innerHTML = '<p>This is your popover!</p>';
       }
</script>

I have tried tinkering with it, but to no avail.

Any ideas, or suggestions, with this is greatly appreciated! Thanks!

5

Here is another example to try. Here I used the display.style none/block and I wrapped the pop_form_wrapper within a top div


<!DOCTYPE html>
<html>
	<body>
		<div id="notice">
			<div id="pop_form_wrapper">
				<div class="pagecopy">
					<p class="bigfont">Want to get all of our recipes in a handy <span>eBook?</span><br/>
					Just signup for our newsletter and they're yours.
					<span class="biggerfont">FREE!</span></p>
					<img src="images/pop_form_crescent.png" class="crescent" width="99" height="25" />
					<p>At Domain.com we have collected the best of our family recipes, and even created some new palate pleasers, and would like to offer them to you...FREE!  Just signup for our newsletter using the form below, and we'll email it right to you.</p>
					<p class="mediumfont"><span>But, wait.  There's more!</span></p>
					<p>By subscribing to our newsletter, you'll also receive coupons and other offers to use here on our site!  It doesn't get any better than that.</p>
				</div>  
				
				<!--  Pop Form -->
				Sign up FORM GOES HERE
				<!-- / Pop Form -->
			</div>		
		</div>
		<script>
			var pop_form_wrapper = document.getElementById('pop_form_wrapper'),
				t = setTimeout("showMsg()",5000);
			
			pop_form_wrapper.style.display = 'none';
			
			var showMsg = function() {
				pop_form_wrapper.style.display = 'block';
			}
		</script>
	</body>
</html>
6

Hey, thanks! A little tinkering to get the CSS exact, and this should be fine.

Many thanks!!