jquery modal with dynamic content

Question

ok so I'm using the code below to pull up a modal window whenever the user clicks on the link shown. Everything works fine but I need to also pass a variable to the page that is loaded in modal window and I'm not sure how to do this. The link would obviously change to :

<a id="testmodal" href="modal.php?id=$id">Test</a>

But what modification need to be made to the jquery so that modal_window.php receives the $id variable when it is loaded in the modal window? Any help would be awesome...thanks!

                    <style>
        body{
            margin:0; 
            padding:0;
        }

        #overlay {
            position:fixed; 
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:#000;
            opacity:0.5;
            filter:alpha(opacity=50);
        }

        #modal {
            position:absolute;
            background:url(tint20.png) 0 0 repeat;
            background:rgba(0,0,0,0.2);
            border-radius:14px;
            padding:8px;


        }

        #content {
            border-radius:8px;
            background:#fff;
                            padding:20px;

        }

        #close {
            position:absolute;
            background:url(close.png) 0 0 no-repeat;
            width:24px;
            height:27px;
            display:block;
            text-indent:-9999px;
            top:-7px;
            right:-7px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  
            </script>
    <script>
        var modal = (function(){
            var 
            method = {},
            $overlay,
            $modal,
            $content,
            $close;

            // Center the modal in the viewport
            method.center = function () {
                var top, left;

                top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

                $modal.css({
                    top:top + $(window).scrollTop(), 
                    left:left + $(window).scrollLeft()
                });
            };

            // Open the modal
            method.open = function (settings) {
                $content.append(settings.content);

                $modal.css({
                    width: settings.width || 'auto', 
                    height: settings.height || 'auto'
                })

                method.center();

                $(window).bind('resize.modal', method.center);

                $modal.show();
                $overlay.show();
            };

            // Close the modal
            method.close = function () {
                $modal.hide();
                $overlay.hide();
                $content.empty();
                $(window).unbind('resize.modal');
            };

            // Generate the HTML and add it to the document
            $overlay = $('<div id="overlay"></div>');
            $modal = $('<div id="modal"></div>');
            $content = $('<div id="content"></div>');
            $close = $('<a id="close" href="#">close</a>');

            $modal.hide();
            $overlay.hide();
            $modal.append($content, $close);

            $(document).ready(function(){
                $('body').append($overlay, 
                              $modal);                      
            });

            $close.click(function(e){
                e.preventDefault();
                method.close();
            });

            return method;
        }());

        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){




            $('a#testmodal').click(function(e){
                $.get('modal_window.php', function(data){
                            modal.open({content: data});});
                e.preventDefault();
            });



        });



    </script>
</head>
<body>


<a id="testmodal" href="modal.php">Test</a>
</body>
</html>

score 0 · Answer 1 · answered Jul 02 '13 at 20:12

0

You can check and retrieve the id with jquery at the start of the page like this:

var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);

or with PHP / jQuery:

var id = '<?php if(isset($_GET['id']))echo($_GET['id']; ?>';

answered Jul 02 '13 at 20:12

Alessandro Minoccheri

35,521
22
122
171

ok thanks! But where would I insert that in my code? Would it go in my click function? – matt tuman Jul 02 '13 at 20:14
if you wanna check before all you can insert it at the start of the page inside $(document).ready(function(){ //code }); you can have the id before all your script and use it where you want @matttuman – Alessandro Minoccheri Jul 02 '13 at 20:15
Don't simply echo id `echo $_GET['id']`, should use `htmlspecialchars()` to prevent XSS http://stackoverflow.com/questions/2159724/how-can-escaping-be-used-to-prevent-xss-attacks !! – mkutyba Jul 02 '13 at 20:15
ok I think I understand....and then would I change $.get('modal_window.php') to $.get('modal_window.php?id=$id') ? – matt tuman Jul 02 '13 at 20:19

score 0 · Answer 2 · answered Jul 02 '13 at 20:13

This can be done by capturing the variable through the URL. You can do this with Javascript like this:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Refer to: http://css-tricks.com/snippets/javascript/get-url-variables/

jquery modal with dynamic content

2 Answers2