Fire JS Bin - apprise

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// Apprise 1.5 by Daniel Raftery
// http://thrivingkings.com/apprise
//
// Button text added by Adam Bezulski
//

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>

<div style="clear:both;"></div>
		<p class="code">
		<script><br/>
		$(document).ready(function()<br/>
		  {<br/>
		  apprise('Ready to begin?', {'verify':true}, function(r)<br/>
		    {<br/>
		    if(r)<br/>
		        { <br/>
		        // user clicked 'Yes'<br/>
		        ...<br/>
		        }<br/>
		    else<br/>
		        { <br/>
		        // user clicked 'No'<br/>
		        ...<br/>
		        }<br/>
		    });<br/>
		  });<br/>
		</script></p>

<p class="code">
		{<br/>
		'confirm'	:	false, 	// Ok and Cancel buttons<br/>
		'verify'	:	false,	// Yes and No buttons<br/>
		'input'		:	false, 	// Text input (can be true or string for default text)<br/>
		'animate'	:	false,		// Groovy animation (can true or number, default is 400)<br/>
		'textOk'		:	'Ok',		// Ok button default text<br/>
		'textCancel'	:	'Cancel',	// Cancel button default text<br/>
		'textYes'		:	'Yes',		// Yes button default text<br/>
		'textNo'		:	'No'		// No button default text<br/>
		}
		</p>

body
	{
	font-family:Gill Sans MT, Gill Sans, Verdana, sans-serif;
	background:url(/images/bgG.png);
	padding:0;
	margin:0 0;
	color:#727272;
	}
a, a:visited
	{
	text-decoration:none;
	color:#000;
	border:none;
	}
a:hover, a:active
	{ text-decoration:underline; }
.header
	{
	height:47px;
	margin:20px 50px;
	}
.header li, .header img
	{
	float:left;
	margin-right:20px;
	border:none;
	}
.header li
	{
	list-style-type:none;
	font-size:15px;
	padding:16px 0;
	}
.top
	{
	color:#222;
	text-shadow:0px 1px 2px #bbb;
	margin-top:20px;
	}
.top h1, .top h2
	{
	margin:0;
	padding:0;
	line-height:20px;
	}
.top h1 { font-size:26px; }
h2 { font-size:20px; }
h3 { font-size:14px; }
.content
	{
	padding:0 50px;
	margin:20px 0;
	}
.l-column
	{
	width:69%;
	float:left;
	border:1px solid #ddd;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	background:#fff;
	box-shadow:0px 2px 4px #bbb;
	-moz-box-shadow:0px 2px 4px #bbb;
	-webkit-box-shadow:0px 2px 4px #bbb;
	word-wrap: break-word;
	}
.l-inside, .r-inside
	{
	margin:0 20px;
	}
.r-column
	{
	width:30%;
	float:left;	
	text-shadow:0px 1px 0px #fff;
	}
.tryit, .button
	{
	list-style-type:none;
	float:left;
	background:#eee;
	border:1px solid #bbb;
	padding:5px 10px;
	margin:0px 10px 10px 0px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	cursor:pointer;
	box-shadow:0px 2px 3px #aaa;
	-moz-box-shadow:0px 2px 3px #aaa;
	-webkit-box-shadow:0px 2px 3px #aaa;
	text-shadow:0px 1px 0px #fff;
	}
.tryit:hover, .button:hover
	{ color:#000; }
.tryit:active, .download:active, .button:active
	{ box-shadow:none; }
.code
	{
	background:#fffaef;
	border:1px solid #ccc;
	font-family:monospace;
	font-size:13px;
	padding:5px;
	color:#ab9276;
	}
.download, .download:visited
	{
	background:#eb5847;
	border:1px solid #9e281b;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	padding:5px 10px;
	color:#fff;
	text-shadow:0px -1px 0px #9e281b;
	box-shadow:0px 3px 2px #831e12;
	-moz-box-shadow:0px 3px 2px #831e12;
	-webkit-box-shadow:0px 3px 2px #831e12;
	margin-right:10px;
	}
.download:hover, .download:active
	{
	color:#9e281b;
	text-shadow:0px 1px 0px #fd7a6b;
	text-decoration:none !important;
	}

.meta li
	{
	list-style-type:none;
	float:left;
	margin-right:20px;
	font-size:12px;
	}

.entry h2, .entry h3
	{
	padding:0;
	margin:0;
	}
.entry
	{
	margin:30px 0;
	}
	
#dsq-global-toolbar
	{ text-shadow:none; }
	
/* Ad Packs */
body .adpacks{background:#fff;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0 !important;margin:0;}
body .one .bsa_it_ad:hover img{-moz-box-shadow:0 0 3px #000;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:none;margin:0 0 5px;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding:6px 0 0 0;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:10px;margin:12px 15px 0;text-align:right;}
div.b-ad { margin-top:40px; height:250px; width:250px; border:1px solid #333; }
div.b-ad a, div.b-ad img { border:none !important; }

.appriseOverlay
	{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.3);
	display:none;
	}
.appriseOuter
	{
	background:#eee;
	border:1px solid #fff;
	box-shadow:0px 3px 7px #333;
	-moz-box-shadow:0px 3px 7px #333;
	-webkit-box-shadow:0px 3px 7px #333;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	position:absolute;
	z-index:99999999;
	min-width:200px;
	min-height:50px;
	max-width:75%;
	position:fixed;
	display:none;
	}
.appriseInner
	{
	padding:20px;
	color:#333;
	text-shadow:0px 1px 0px #fff;
	}
.appriseInner button
	{
	border:1px solid #bbb;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius:3px;
	background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
  	background: -webkit-linear-gradient(#eee, #d5d5d5);
    background: -o-linear-gradient(#eee, #d5d5d5);
	color:#232d3d;
	font-size:12px;
	font-weight:bold;
	padding:4px 10px;
	margin:0 3px;
	text-shadow:0px 1px 0px #fff;
	cursor:pointer;
	box-shadow:0px 1px 2px #ccc;
	-moz-box-shadow:0px 1px 2px #ccc;
	-webkit-box-shadow:0px 1px 2px #ccc;
	}
.appriseInner button:hover
	{
	color:#d85054;
	}
.aButtons, .aInput
	{
	margin:20px 10px 0px 10px;
	text-align:center;
	}
.aTextbox
	{
	border:1px solid #aaa;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	box-shadow:0px 1px 0px #fff;
	-moz-box-shadow:0px 1px 0px #fff;
	-webkit-box-shadow:0px 1px 0px #fff;
	width:180px;
	font-size:12px;
	font-weight:bold;
	padding:5px 10px;
	}

Pop out