jQuery Bubble Popup onclick event sample program

Step 1: Javadomain-jquery-bubble-popup.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>

 

Download the required source files from the below links,

jquery-1.7.2.min.js

jquery-bubble-popup-v3.css

jquery-bubble-popup-v3.min.js

Output:

jquery bubble popup onclick event output

Download the Source code:

bubble popup onclick event

Thanks for reading this post……………!!!

109 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *