jQuery Bubble Popup onclick event sample program

January 22, 2013 Jquery

Step 1: Javadomain-jquery-bubble-popup.html

[html]<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Bubble Popup – Javadomain</title>
<link href="jquery-bubble-popup-v3.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-bubble-popup-v3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘.mButton’).click(function() {
var button_id = this.id.replace(‘link’, ‘button’);
var button = $(‘#’ + button_id);
if ($(‘.mButton’).HasBubblePopup()) {
alert(‘Bubble popup already opened’);
return false;
}
$(‘.mButton’).CreateBubblePopup(); // bubble popup created
var button_click = $(this); // clicked button value assigned to button_click
var bubble_popup_id = button_click.GetBubblePopupID(); // getting the bubble popup id the clicked button
button_click.ShowBubblePopup({
selectable : true,
position : ‘top’,
align : ‘center’,
innerHtml : ‘jquery bubble popup onclick event’,
innerHtmlStyle : {
color : ‘#FFFFFF’,
‘text-align’ : ‘center’
},
themeName : ‘all-black’,
themePath : ‘jquerybubblepopup-themes’
}, false);
// Showing the bubble popup for the button click event
button_click.FreezeBubblePopup(); // freezing the bubble popup
$(‘#’ + bubble_popup_id).click(function() {
$(button_click).RemoveBubblePopup(); //removing the bubble popup
});
});
});
</script>
</head>
<body>
<div class="page">
<div class="header">
<h3 align="center">jQuery Bubble Popup Example</h3>
</div>
<div class="content">
<br>
<div class="mButton" align="center">come here!</div>
<br> <br>
</div>
</div>
</body>
</html>[/html]