CODEWITHSUNDEEP
javascriptjqueryhtml
Eray Balkanli
Eray Balkanli

Reputation: 7990

Understanding which div is clicked by the end user while opening a modal window

I would like to open a modal view when a user creates some hyperlinks. There will be many hyperlinks on the page, so I would like to understand which div, related to the clicked hyperlink, I should present the user as a modal view.

The code I wrote is:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Test</title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

        <script>

           function OpenModal() {
               $("#divModal").dialog({
                    autoOpen: false, modal: true, title: 'Modal', width: 'auto', height: 'auto'
                    , buttons: { "Cancel": function () { $(this).dialog("close"); } },
                }).dialog('open');
                return false;

            }
        </script>
    </head>

    <body>
        <a href="#" onclick="javascript:OpenModal();">View Page</a>
        <div style="display:none;" id="divModal" >
            <iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe>
        </div><br />
        <a href="#" onclick="javascript:OpenModal();" >Trip Planning</a>
         <div style="display:none;" id="divModal2" >
            <iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe>
        </div><br />
    </body>
</html>

All I want is to make #divModal in the OpenModal function dynamic, the clicked div it should be.

I appreciate if someone helps. Thanks.

EDIT: What should I do if there is a specific <a> that should redirect user to another page instead of displaying a modal view? How can I check it in the js function?

<a href="#divRedirect1">Find a bus</a>
   <div style="display:none;" id="divRedirect1" >
        <iframe id="myIframe3" src="/transit/findbus.php" width="800" height="600"></iframe>
   </div>

For example, here if user clicks 'Find a bus', the user should go to the findbus.php, not see a modal view.

Thanks.

EDIT2: I have just notified that the selected correct answer of this question also advises me to use class while defining <a> tags. So I followed his advice. The problem has solved like: 

<a href="#divModal" class="displayModalView">Trip Planning</a>
   <div style="display:none;" id="divModal" >
       <iframe id="myIframe1" src="/transit/access_a_bus.php" width="800" height="600"></iframe>
   </div> 
<a href="/transit/findbus.php" class="justRedirect">Find a bus</a>

<script>
    $(function() {
       $('.displayModalView').click(function(e) {... //same what he wrote...}
    });
</script>

Upvotes: 2

Views: 48

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

Firstly, change the href attribute of the a element to be a selector for the div you want to turn in to a modal, and also remove the outdated onclick attributes.

<a href="#divModal">View Page</a>
<div style="display:none;" id="divModal" >
    <iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe>
</div><br />

<a href="#divModal2">Trip Planning</a>
 <div style="display:none;" id="divModal2" >
    <iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe>
</div><br />

You can then hook to the click event of those a elements in JavaScript:

<script>
    $(function() {
        $('a').click(function(e) {
            e.preventDefault();
            var target = $(this).attr('href');
            $(target).dialog({
                autoOpen: false, 
                modal: true, 
                title: 'Modal', 
                width: 'auto', 
                height: 'auto', 
                buttons: {                 
                    "Cancel": function () { 
                        $(this).dialog("close"); 
                    } 
                }
            }).dialog('open');
        });
    });
</script>

I would suggest you make the a selector a little more specific by using a class, however this will work given the HTML in your question.

Upvotes: 2

Related Questions