Make a conversation popup from a table

Posted on 2016-10-03
Last Modified: 2016-10-04
I have a table that is like this:

    Month   Day       Year              Name 
    12      2           2016              Jazz
    13      5           2016              John

Open in new window

I want it to be like

    Month i  Day       Year              Name 
    12       2           2016              Jazz
    13       5           2016              John

Open in new window

And when I click on the "i" , a bubble conversation pops and says "This is the month you will need to register"
I have this so far but my button is not clickable and nothing pops up, i'm not sure what to do
This is to show the i
    <th style= "white-space: nowrap">Month  <button id="opener"><i class="fa fa-info" ></i></button></th>

Open in new window

And my jquery code is:

  $(document).ready(function() {
    $( "#dialog" ).popbox({
      autoOpen: false,
      'open'          : '.open',
      'box'           : '.box',
      'arrow'         : '.arrow',
      'arrow-border'  : '.arrow-border',
      'close'         : '.close'
      hide: {
        effect: "explode",
        duration: 1000

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );

Open in new window

And this when the table is closed in the div

<div id = "dialog">
<div class='collapse'>
            <div class='box'>
              <div class='arrow'></div>
              <div class='arrow-border'></div>

Open in new window

The i is a button clickable but nothing popsup and the HI is shown under the table
And how can I make the bubble
Question by:Jasmine Ikhreishi
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41826522
First, check F12 console for errors.  Also, please verify you have jQuery UI linked (assuming this is a jQuery UI modal).

I'll set your code up in a Fiddle and see if I can find any other problems.
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41826540
oh wait, this isn't jQuery UI modal.  It's some third party plugin for a modal.  well, make sure you have that linked
LVL 43

Accepted Solution

zephyr_hex (Megan) earned 500 total points
ID: 41826592
So there's an error:

Which is referencing this part of your jQuery:
 hide: {
   effect: "explode",
   duration: 1000

Open in new window

I'm not familiar with this plugin so I don't know what the correct syntax is... but if I remove that portion, the error goes away.

The next error happens on the click event:
error 2
This is where I originally was confused.  You init something called a popbox, but then you attempt to open it referencing "dialog", which is a jQuery UI thing... not a popbox thing.  So you need to call popbox open, not dialog open.  I assume this would look something like:

Open in new window

My recommendation is to strip out all of the options you're attempting to init your popbox with, and just go with a super basic implementation -- and once that's working, add back in the options you want.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JQuery DataTable Functionality 8 55
Form submit takes only for one form 23 54
Pass a js value to an html form 5 43
Why is my select returning NaN 23 46
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question