Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 746
  • Last Modified:

multiple jquery dialogs on the same page?

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
arthurh88
Asked:
arthurh88
1 Solution
 
KhiluCommented:
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
 
arthurh88Author Commented:
thanks!  i managed to get that to work
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now