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 jar files,

1. jquery-1.7.2.min

2. jquery-bubble-popup-v3.min

3. jquery-bubble-popup-v3

Step 3: Put everything in the same location and open the Javadomain-jquery-bubble-popup.html 

Output:

jQuery_bubble_popup_javadomain

 

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

796 total views, 1 views today

4 comments

  • L

    If I uncomment $(‘.button’).click(function(){ then the popup gets stuck open once you click it. How do you fix that?

    Thanks.

    • L

      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(

      );

      });

    • Naveen

      < !DOCTYPE HTML>


      jQuery Bubble Popup – Javadomain



      jQuery Bubble Popup Example

      come here!


      • L

        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();
        });
        });
        });

Leave a Reply

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