• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

Open a modal via jquery on change

I am trying to open a modal in jquery on change of a select box.

There are multiple options in there one of which will redirect to a new window and one that I want to open a modal instead and load an external file.

The code that is currently working is here:
	$(".selectOpt").change(function() {
			var url = $(this).val();
			$(location).attr('href',url);
	});

Open in new window


How can I sent an attribute to that code, do an if statement to tell if it's that one specific option in the dropdown box and to open a modal with an external page instead of redirecting?

Thanks!
0
ScotTFO
Asked:
ScotTFO
1 Solution
 
mrh14852Commented:
If you want to maintain the URLs as the values in the select options you can do something like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#modal-window').dialog({
                height: 800,
                width: 600,
                modal: true,
                autoOpen: false
            });
            $('#selectOpt').change(function(){
                url = $('#selectOpt option:selected').val();
                if ($('#selectOpt option:selected').attr('class') === 'modal') {
                    $('#modal-window').load(url,function(){
                        $('#modal-window').dialog('open');
                    });
                }
                else if ($('#selectOpt option:selected').attr('class') === 'redirect') {
                    window.open(url,'_self',false);
                }
                else {
                    return false;
                }
            });
        });
    </script>
    <title>Test</title>
</head>
<body>
<select id="selectOpt">
    <option value="">&nbsp;</option>
    <option class="modal" value="./modal.html">Modal Page</option>
    <option class="redirect" value="./redirect.html">Redirect Page</option>
</select>
<div id="modal-window" title"This is modal window"></div>
</body>
</html>

Open in new window

0
 
ScotTFOAuthor Commented:
Worked perfect, thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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