CODEWITHSUNDEEP
javascriptjqueryhtmlonclickpopup
CheapCoolGifts
CheapCoolGifts

Reputation: 3

Click an HTML button/link on page load

I have implemented various methods on this forum, and cannot figure out a solution.

I simply need to open a popup button on pageload.

Here is the test page: test page

Here is the code that I am currently working with:

<script>
window.setTimeout('clickit()',5000);
function clickit(){
   location.href = document.getElementById("fmp-button");
}
</script>

<a href="#" rel="487d7c3e5cb0edeabb176a823a117ad8" id="fmp-button"><img src="https://assets.fortumo.com/fmp/fortumopay_150x50_red.png" width="150" height="50" alt="Mobile Payments by Fortumo" border="0" id="popup"/></a>

<script src='https://assets.fortumo.com/fmp/fortumopay.js' type='text/javascript'></script>

Any help would be greatly appreciated!

Update: Solved. (see correct answer below)

FYI, you may need to increase the number to 1000 or 2000. 500 does not work.

Upvotes: 0

Views: 5429

Answers (3)

Pankaj Kumar
Pankaj Kumar

Reputation: 3

$(document).ready(function() {	

var id = '#dialog';
	
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
	
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(500);	
$('#mask').fadeTo("slow",0.9);	
	
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
              
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
	
//transition effect
$(id).fadeIn(2000); 	
	
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
	
});
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}

#boxes #dialog {
  width: 750px;
  height: 300px;
  padding: 10px;
  background-color: #ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 250px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<div id="boxes">
  <div id="dialog" class="window">
    Your Content Goes Here
    <div id="popupfoot"> <a href="#" class="close agree">I agree</a> | <a class="agree"style="color:red;" href="#">I do not agree</a> </div>
  </div>
  <div id="mask"></div>
</div>

Upvotes: 0

luiscrjr
luiscrjr

Reputation: 7268

You can try this code:

window.setTimeout(clickit, 500);

function clickit(){
   document.getElementById("fmp-button").click();
}

Explaining what happens:

1) .setTimeout receives a function. You were passing a String; you can also pass an anonymous function and trigger your function from inside:

window.setTimeout(function() { clickit(); }, 500);

2) document.getElementById("fmp-button") returns the element with the ID fmp-button.

3) .click method "simulates" user click (triggers the link, as if it was an user clicking)

Fiddle: https://jsfiddle.net/mrlew/mvrvdL7c/

Upvotes: 1

user7448904
user7448904

Reputation: 11

Edited my answer

How about this?

<html>
<body onload="myFunction()">



<script>
function myFunction() {
    var myWindow = window.open("", "", "width=200,height=100");
}
</script>

</body>

Upvotes: 0

Related Questions