Solved

multiple jquery dialogs on the same page?

Posted on 2013-01-23
2
722 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

895 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now