jQuery Bubble popup example program
jQuery Bubble popup program example:
Download the jQuery Bubble popup example 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(){
$('.button').CreateBubblePopup({position:'top',align:'center',
innerHtml: 'Javadomain First Jquery Bubble popup!',innerHtmlStyle: {color:'#FFFFFF','text-align':'center'},themeName: 'all-black',themePath:'jquerybubblepopup-themes'});
});
</script>
</head>
<body>
<div class="page">
<div class="header">
<h3 align="center">Javadomain jQuery Bubble Popup Example</h3>
</div>
<div class="content">
<br>
<div class="button" align="center">come here!</div>
<br>
<br>
</div>
</div>
</body>
</html>
Step 2: Download the required below dependent files,
Step 3: Put everything in the same location and open the Javadomain-jquery-bubble-popup.html
Output:
Thanks for reading this post…………!!!
If I uncomment $(‘.button’).click(function(){ then the popup gets stuck open once you click it. How do you fix that?
Thanks.
This is my current code:
$(document).ready(function(){
$(‘#icon01, #icon02, #icon03, #icon04, #icon05, #icon06, #icon07, #icon08, #icon09, #icon10, #icon11, #icon12, #icon13, #icon14, #icon15, #icon16, #icon17, #icon18, #icon19, #icon20’).CreateBubblePopup({
selectable: true,
position : ‘top’,
align : ‘center’,
innerHtml: ‘Default Bubble’,
innerHtmlStyle: {
color:’#000′,
‘text-align’:’center’
},
themeName: ‘grey’,
themePath: ‘images/jquerybubblepopup-themes’
});
$(‘#icon01’).SetBubblePopupInnerHtml(
” +
‘Title’ +
” +
‘Text goes here.’ +
”
);
$(‘#icon02’).SetBubblePopupInnerHtml(
);
});
jQuery Bubble Popup Example
Thank you so much! Here is my final code in case it can help someone else.
$(document).ready(function(){
var icon01 =
\’\’ +
\’Cupcake Ipsum\’ +
\’Sweet jelly beans macaroon cheesecake cookie caramels chocolate cake gummi bears muffin.\’ +
\’\’;
var icon02 =
\’\’ +
\’Sugar Coated\’ +
\’Bonbon lollipop soufflé halvah chupa chups jelly beans.\’ +
\’\’;
var icon03 =
\’\’ +
\’Lorem Ipsum\’ +
\’Pastry bear claw wafer candy candy sweet roll chocolate bar chocolate cake.\’ +
\’\’;
$(\’.icon\’).click(function() {
var iconID = this.id;
if ($(\’.icon\’).map(function() {
if ($(this).HasBubblePopup())
return true;
})[0]) {
alert(\’Please close current popup before opening another.\’);
return false;
}
$(\’.icon\’).CreateBubblePopup();
var iconClick = $(this);
var bubblePopupID = iconClick.GetBubblePopupID();
iconClick.ShowBubblePopup({
position : \’top\’,
align : \’center\’,
innerHtml: eval(iconID),
innerHtmlStyle: {
color:\’#000\’,
\’text-align\’:\’center\’
},
themeName: \’grey\’,
themePath: \’images/jquerybubblepopup-themes\’
}, false);
iconClick.FreezeBubblePopup();
$(\’#\’ + bubblePopupID).click(function() {
$(iconClick).RemoveBubblePopup();
});
});
});