Solved

multiple jquery dialogs on the same page?

Posted on 2013-01-23
2
729 Views
Last Modified: 2013-01-24
Here is my working java script for a single JQuery dialog button:
 $.fx.speeds._default = 800;
    $(function  thedialog() {
        $("#myDialog").dialog({

            autoOpen: false,
            show: 'slide',
            hide: 'explode',
            modal: false,
            width: 300,
            minHeight: 200,
            maxHeight: 500,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#opener").click(function (e) {
            e.preventDefault();
            $("#myDialog").dialog("open").effect("highlight", {}, 2000);
            ;
            return false;
        });

        function positionDialog() {
            linkOffset = $("#opener").position();
            linkWidth = $("#opener").width();
            linkHeight = $("#opener").height();
            scrolltop = $(window).scrollTop();
            $("#myDialog").dialog("option", "position", [(linkOffset.left - 200 / 2) + linkWidth / 2, linkOffset.top + linkHeight - scrolltop]);
        }

        positionDialog();

        $(window).resize(function () {
            positionDialog();
        });

        $(window).scroll(function () {
            positionDialog();
        });
    });
</script>

Open in new window


In my HTML I use this:
<div id="myDialog" title="Dialog1">
<p>hello world</p>
  </div>
                <input type="image" name="opener" id="opener"  onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/learnmore.png" onclick="return false;" />

Now I want to make another button (up to 10 more), but using the same ID for a button does not work.  If I change my second Button ID, then my script doesn't work.  If I use class="opener" for a second button, that doesn't work.  

 Any ideas on how to get multiple dialog's working on the same page, using image buttons?
0
Comment
Question by:arthurh88
2 Comments
 
LVL 3

Accepted Solution

by:
Khilu earned 500 total points
ID: 38813281
This might help you.

Passing individual button to open pop up.
onclick="openPopUp(this); return false;"

<input type="image" name="opener" id="opener"  onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/learnmore.png" onclick="openPopUp(this); return false;" /> 


 var thisButton;
        function openPopUp(button) {
            thisButton = $(openPopUp);
            positionDialog(thisButton);
            //e.preventDefault();
            $("#myDialog").dialog("open").effect("highlight", {}, 2000);
            return false;
        }

        function positionDialog(button) {
            linkOffset = button.position();
            linkWidth = button.width();
            linkHeight = button.height();
            scrolltop = $(window).scrollTop();
            $("#myDialog").dialog("option", "position", [(linkOffset.left - 200 / 2) + linkWidth / 2, linkOffset.top + linkHeight - scrolltop]);
        }

        positionDialog(thisButton);

        $(window).resize(function() {
            positionDialog(thisButton);
        });

        $(window).scroll(function() {
            positionDialog(thisButton);
        });

Open in new window

0
 

Author Closing Comment

by:arthurh88
ID: 38813383
thanks!  i managed to get that to work
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …

808 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