Popup à l'ouverture de ma page

**roy2work** · 27/12/2013, 13h13

Bonjour

J'ai un exemple de popup qui marche très bien avec un bouton mais ce que je veux c'est lorsque j'ouvre ma page le popup s'affiche automatiquement!

comment ça marche !

voici l'exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
 
	<!--Meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
	<!--Title-->
	<title>Pop Up Modal Window</title>
 
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">
 
	<!--HTML5 Shiv-->
	<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 
</head>
<body>
 
<a href="#" id="button" >Click me</a>
 
 
<div id="modal">
	<div id="heading">
		Are you sure you want to do that?
	</div>
 
	<div id="content">
		<p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>
 
		<a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>
 
		<a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
	</div>
</div>
	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.reveal.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
			$('#button').click(function(e) { // Button which will activate our modal
			   	$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: true,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				});
			return false;
			});
		});
	</script>
 
</body>
</html>

**SpaceFrog** · 27/12/2013, 13h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
		$(document).ready(function() {
			$('#button').click(function(e) { // Button which will activate our modal
			   	$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: true,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				});
			return false;
			});
		});
	</script>

dans ce bout de code tu attibues un evenement click au "bouton" (lien)

il suffit de lancer directement la fonction de l'evement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
		$(document).ready(function() {
 
			   	$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: true,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				});
 
		});
	</script>

**roy2work** · 30/12/2013, 11h16

Merci SpaceFrog c'est exactement ce que je veux merci bcp

Popup à l'ouverture de ma page

jQuery

Vue hybride

Discussions similaires

Partager

Partager