Fatal编程技术网
  • jquery/
  • 具有动态内容的jquery模式

具有动态内容的jquery模式

jquery

具有动态内容的jquery模式,jquery,Jquery,好的，所以我使用下面的代码，每当用户点击显示的链接时，就会弹出一个模式窗口。一切正常，但我还需要将一个变量传递给在模式窗口中加载的页面，我不知道如何做到这一点。这种联系显然会变成： <a id="testmodal" href="modal.php?id=$id">Test</a> 但是需要对jquery进行哪些修改，以便modal_window.php在模态窗口中加载$id变量时接收该变量？任何帮助都会很棒…谢谢 <s

好的，所以我使用下面的代码，每当用户点击显示的链接时，就会弹出一个模式窗口。一切正常，但我还需要将一个变量传递给在模式窗口中加载的页面，我不知道如何做到这一点。这种联系显然会变成：

<a id="testmodal" href="modal.php?id=$id">Test</a>
但是需要对jquery进行哪些修改，以便modal_window.php在模态窗口中加载$id变量时接收该变量？任何帮助都会很棒…谢谢

                    <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>


身体{
保证金：0；
填充：0；
}
#覆盖层{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
#模态{
位置：绝对位置；
背景：url（tint20.png）0 0重复；
背景：rgba（0,0,0,0.2）；
边界半径：14px；
填充：8px；
}
#内容{
边界半径：8px；
背景：#fff；
填充：20px；
}
#接近{
位置：绝对位置；
背景：url（close.png）0 0不重复；
宽度：24px；
高度：27px；
显示：块；
文本缩进：-9999px；
顶部：-7px；
右：-7px；
}
var modal=（函数（）{
变量
方法={}，
$overlay，
$modal，
$content，
$close；
//在视口中使模态居中
method.center=函数（）{
左上角；
top=Math.max（$（窗口）.height（）-$modal.outerHeight（），0）/2；
左=数学.max（$（窗口）.width（）-$modal.outerWidth（），0）/2；
$modal.css({
top:top+$（窗口）.scrollTop（），
左：左+$（窗口）。滚动左（）
});
};
//打开模型
method.open=函数（设置）{
$content.append（settings.content）；
$modal.css({
宽度：settings.width | |“自动”，
高度：设置。高度| |“自动”
})
方法。中心（）；
$（window.bind（'resize.model'，method.center））；
$modal.show（）；
$overlay.show（）；
};
//关闭模式
method.close=函数（）{
$modal.hide（）；
$overlay.hide（）；
$content.empty（）；
$（window.unbind（'resize.modal'）；
};
//生成HTML并将其添加到文档中
$overlay=$（''）；
$modal=$（''）；
$content=$（''）；
$close=$（''）；
$modal.hide（）；
$overlay.hide（）；
$modal.append（$content，$close）；
$（文档）.ready（函数（）{
$（'body'）。追加（$overlay，
$modal）；
});
$close。单击（功能（e）{
e、 预防默认值（）；
方法close（）；
});
返回法；
}());
//在查询文档之前，请等待DOM已加载
$（文档）.ready（函数（）{
$（'a#testmodal'）。单击（函数（e）{
$.get（'modal_window.php'，函数（数据）{
打开（{content:data}）；}）；
e、 预防默认值（）；
});
});
您可以在页面开头使用jquery检查和检索id，如下所示：

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

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);
}
或者使用PHP/jQuery：

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

var id='这可以通过URL捕获变量来完成。您可以使用Javascript这样做：


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



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);
}


函数getQueryVariable（变量）
{
var query=window.location.search.substring（1）；
var vars=query.split（&）；

for（var i=0；看，谢谢！但是我应该在代码中插入它到哪里？它会进入我的单击函数吗？如果你想检查之前，你可以在$（document）内的页面开始处插入它。ready（function（）{//code}）；你可以在所有脚本之前拥有id，并在你想@matttumanDon的地方使用它，而不仅仅是echo id
echo$\u GET['id']
，应该使用
htmlspecialchars（）
来防止XSS！！好的，我想我明白了…然后我会将$.get（'modal\u window.php'）更改为$.get（'modal\u window.php？id=$id'）？