Hello,
I want to get a jquery popup on my site.
from this site.
http://www.bamdaa.com/demo/metro-alert/
i used there source code, but its not working.
what do i wrong ?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Metro Alert</title>
<script src="www.bamdaa.com/demo/metro-alert/js/jquery.min.js"></script>
<script src="www.bamdaa.com/demo/metro-alert/js/metroAlert.min.js"></script>
<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert.min.css" />
<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-sky.css" />
<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-pumpkin.css" />
<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-midnight.css" />
<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-greensea.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,800|Open+Sans+Condensed:300,700&subset=latin,cyrillic-ext,cyrillic" rel="stylesheet" type="text/css"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<style>
body{ background: #1abc9c; font:12px Tahoma;}
h1, h2, h3{ font-family: "Open Sans Condensed";}
.documentation{
width:960px;
margin: auto;
min-height: 200px;
background: #ecf0f1;
padding: 40px;
}
.documentation > div{
background: #e0e4e5;
padding: 20px;
margin: 10px 0;
}
.btn{
display: inline-block;
background: #16a085;
color: #fff;
padding: 10px 20px;
margin: 10px 0;
text-decoration: none;
font: 12px Tahoma;
}
.btn:hover{
-moz-opacity: 0.9;
opacity: 0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);
}
.c1{background: #9bbb59;}
.c2{background: #8064a2;}
.c3{background: #4bacc6;}
.c4{background: #ff6600;}
table{
width:100%;
}
td{
vertical-align: top;
text-align: left;
width:50%;
padding: 0 20px 20px;
}
caption{
text-align: left;
}
pre{
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
padding: 15px;
background: #fff
}
.title{
font-size: 48px;
background: #f39c12;
color: #fff;
padding: 20px;
margin: 0 -40px;
text-align: center;
}
.fa-star{ color: #ff9900; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
</style>
</head>
<body>
<div class="documentation">
<h1 class="title">jQuery Metro Alert 1.1</h1>
<h1><i class="fa fa-check fa-lg"></i> Features</h1>
<p>
<ul>
<li>Easy to use</li>
<li>Four creative themes included (GreenSea, Midnight, Pumpkin, Sky)</li>
<li>Crossbrowser (Firefox, Chrome, Safari, Opera, Internet explorer 6+)</li>
<li>Compatible with every layout</li>
<li>Responsive</li>
<li>Fully themeable (Globally, Particle)</li>
<li>Fully configurable</li>
<li>Localization (Globally, Particle)</li>
</ul>
</p>
<br>
<h1><i class="fa fa-gears fa-lg"></i> Installation</h1>
<h3><i class="fa fa-file-text-o fa-lg"></i> Javascript</h3>
<p>
I have included 'metroAlert.js'. Just include this on your html page after jQuery like this:
<pre>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/metroAlert.js"></script>
</pre>
</p>
<h3><i class="fa fa-css3 fa-lg"></i> CSS</h3>
<p>
I have included 'metroAlert.css'. Just include this on your html page like this:
<pre>
<link type="text/css" rel="stylesheet" href="css/metroAlert.css"/>
</pre>
<p>
Include 'metroAlert-theme-midnight.css'. If you use any Theme.
<pre>
<link type="text/css" rel="stylesheet" href="css/metroAlert-theme-midnight.css"/>
</pre>
</p>
<h1><i class="fa fa-html5 fa-lg"></i> Usage</h1>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Alert</h3>
<p><a href="#" id="defaultAlert" class="btn">Try it</a></p>
</p>
<p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.alert({title:"Metro Alert", message:"Alert Example"});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Confirm with Callback</h3>
<p><a href="#" class="btn" id="defaultConfirm">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.confirm({
title:"Metro Confirm",
message:"Do you understand? Isn't it easy?<br>Your respond shown center.",
callback: function(respond){
if(respond)
$.notification({
message:"Of course it is so Easy",
position:"cc"
});
else
$.notification({
message:"Why don't you understand?",
position:"cc"
});
}
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Prompt with Callback, Placeholder</h3>
<p><a href="#" class="btn" id="defaultPrompt">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.prompt({
title:"Metro Prompt",
message:"How old are you?",
placeholder: "Please type your age",
callback: function(respond){
if(respond !== false){
$.notification({
message: "You are so young. Just <b>"+ respond +"</b>",
position: "tl",
interval: 5000,
theme: "midnight"
});
}
}
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Notification</h3>
<p>
Try it:
<a href="#" class="btn defaultNotification" data-position="tr" data-theme="greensea">Top Right</a>
<a href="#" class="btn defaultNotification" data-position="br" data-theme="midnight">Bottom Rgiht</a>
<a href="#" class="btn defaultNotification" data-position="bc" data-theme="pumpkin">Bottom Center</a>
<a href="#" class="btn defaultNotification" data-position="bl" data-theme="sky">Bottom Left</a>
<a href="#" class="btn defaultNotification" data-position="tl" data-theme="greensea">Top Left</a>
<a href="#" class="btn defaultNotification" data-position="tc" data-theme="midnight">Top Center</a>
<a href="#" class="btn defaultNotification" data-position="cc" data-theme="greensea">Center</a>
</p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$(".defaultNotification").click(function(e){
e.preventDefault();
$.notification({
title:"Metro Notification",
message:"jQuery Metro Notification newly listed",
position: $(this).data("position"),
theme: $(this).data("theme")
});
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Callback / Theme / HTML Icon</h3>
<p><a href="#" class="btn" id="defaultCallback">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.alert({
title:'<i class="fa fa-cog fa-2x"></i><br> Callback / Theme / HTML Icon',
message:"Callback loads when alert is closed. Focus on right bottom corner",
theme: "pumpkin",
callback: function(respond){
$.notification({
message: "Alert is closed!",
position:"br",
theme:"sky"
});
}
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Custom buttons and Removing Close button and Title</h3>
<p><a href="#" class="btn" id="defaultButtons">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.alert({
message:"We have three custom buttons. But without Title and Close button. Focus on top center.",
buttons: {
btnSome: "Some",
btnCustom: "Custom",
btnButtons: "Buttons"
},
close: false, // Removing Close button
theme: 'midnight',
callback: function(respond){
$.notification({
message: "You have clicked on <b>"+ respond +"</b>!",
position:"tc",
theme: "midnight"
});
}
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Backdrop / without Close button</h3>
<p><a href="#" class="btn" id="defaultBackdrop">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.alert({
title:"BACKDROP",
message:"Please click on the dark background to close Alert.",
close: false,
backdrop: true,
theme: 'sky',
vspace: 30
});</pre>
</p>
</div>
<div>
<p>
<h3><i class="fa fa-star fa-lg"></i> Custom HTML supported / vspace / ESC key</h3>
<p><a href="#" class="btn" id="defaultYoutube">Try it</a></p>
</p><p>
<h3><i class="fa fa-code fa-lg"></i> Source</h3>
<pre>
$.alert({
message:'<iframe width="560" height="315" src="..." frameborder="0"></iframe>',
close: false,
backdrop: true,
theme: 'sky',
vspace: 0,
esc: true
});</pre>
</p>
</div>
<p>
<h3><i class="fa fa-flag fa-lg"></i> Thanks to <a href="http://fortawesome.github.io/Font-Awesome/" target="black">Font Awesome</a> for the great icon library</h3>
<h3><i class="fa fa-google-plus-square fa-lg"></i> Thanks to <a href="http://www.google.com/fonts" target="black">Google Fonts</a> for the great font library</h3>
</p>
</div>
<script>
$(function(){
$.notification({
title: "Hey. Hi",
message:"<b>Thanks for watching Demo.</b>",
theme:"sky",
position: "tc"
});
setTimeout(function(){
$.notification({
message:"<b>Please don't forget to rate if you like it.</b><br /><i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i>",
theme:"sky",
width: 300,
position: "tc",
interval: 5000
});
}, 1000);
$("#defaultAlert").click(function(e){
e.preventDefault();
$.alert({
title:"Metro Alert",
message:"Alert Example"
});
});
$("#defaultConfirm").click(function(e){
e.preventDefault();
$.confirm({
title:"Metro Confirm",
message:"Do you understand? Isn't it easy?<br />Your respond shown center.",
theme: "greensea",
callback: function(respond){
if(respond)
$.notification({message:"Of course. It is so Easy", position: "cc"});
else
$.notification({message:"Why don't you understand?", position: "cc"});
}
});
});
$("#defaultPrompt").click(function(e){
e.preventDefault();
$.prompt({
title:"Metro Prompt",
message:"How old are you?",
placeholder: "Please type your age",
callback: function(respond){
if(respond !== false){
$.notification({
message: "You are so young. Just <b>"+ respond +"</b>",
position: "tl",
interval: 5000,
theme: "midnight"
});
}
}
});
});
$(".defaultNotification").click(function(e){
e.preventDefault();
$.notification({
title:"Metro Notification",
message:"jQuery Metro Notification newly listed",
position: $(this).data("position"),
theme: $(this).data("theme")
});
});
$("#defaultCallback").click(function(e){
e.preventDefault();
$.alert({
title:'<i class="fa fa-cog fa-2x"></i><br />Callback / Theme / HTML Icon',
message:"Callback loads when alert is closed. Focus on right bottom corner",
theme: "pumpkin",
callback: function(respond){
$.notification({message: "Alert is closed!", position:"br", theme:"sky"});
}
});
});
$("#defaultButtons").click(function(e){
e.preventDefault();
$.alert({
message:"We have three custom buttons. But without Title and Close button. Focus on top center.",
buttons: {
btnSome: "Some",
btnCustom: "Custom",
btnButtons: "Buttons"
},
close: false,
theme: 'midnight',
callback: function(respond){
$.notification({
message: "You have clicked on <b>"+ respond +"</b>!",
position:"tc",
theme: "midnight"
});
}
});
});
$("#defaultBackdrop").click(function(e){
e.preventDefault();
$.alert({
title:"BACKDROP",
message:"Please click on the dark background to close Alert.",
close: false,
backdrop: true,
theme: 'sky',
vspace: 30
});
});
$("#defaultYoutube").click(function(e){
e.preventDefault();
$.alert({
message:'<iframe width="560" height="315" src="http://www.youtube.com/embed/dN1enxA9NxE?rel=0" frameborder="0" allowfullscreen></iframe>',
close: false,
backdrop: true,
theme: 'sky',
vspace: 0,
esc: true
});
});
});
</script>
</body>
</html>
http://scitec-sportvoeding.nl/test.html
Thanks !
