0

我在接受条款和条件的复选框旁边有一个标签。目前有一个简单的

<a href="/termns.php">Terms</a>

用户可以在哪里阅读条款。

更舒适的是使用 jQuery 在同一页面上添加一个灰色框。

为了提供更多信息，我正在使用多语言网站。事实上，可以创建一个包含每种语言版本的所有文本的文件，但这个文件会变得非常混乱。

这就是为什么我解决了这个问题并使用模板来获得正确的版本。在会话设置方面，将重定向到正确的目录。所以主文本文件被放置在/language/terms.php模板将被包含一次的地方。

现在我玩了一下，发现了这样的东西：

jQuery：

$(document).ready(function(){
    $('#popup_terms').click(function(){ 

        $("#screen").css({
            "display": "block",
            "width": $(document).width(),
            "height": $(document).height(),
            opacity: .7,
        });

        $("#screen-box").css({
            "display": "block",
        });
        return false; 
    });
});

的HTML：

<label for ="tandc"><?php echo $signup_tac;?></label>
<div id="screen"></div>
<div id="screen-box">
    <?php include_once "../$language/popup_$filename.php";?>
</div>

CSS：

#screen{
    position: fixed;
    z-index: 100;
    display: none;
    border: none;
    background: black;
    top: 0;
    left: 0;
}

#screen-box{
    position: fixed;
    z-index: 500;
    display: none;
    height: 400px;
    padding: 50px;
    width: 600px;
    top: 50px;
    left: 25%;
    overflow: scroll;
}

这似乎不是正确的方法，因为当查看源代码时，术语中的文本将是可见的，我对此并不怀疑。

那么处理这个问题的“正确”方法是什么？

4

3 回答 3

1

如果您不想立即在页面中显示源代码，您可以尝试使用 ajax 或 iframe。

假设用户的浏览器可以访问路径../$language/popup_$filename.php，解决方案如下。

iframe 方式

<label for ="tandc"><?php echo $signup_tac;?></label>
<div id="screen"></div>
<div id="screen-box">
    <iframe src="<?php echo "../$language/popup_$filename.php"?>"></iframe>
</div>

AJAX 方式

HTML：

<label for ="tandc"><?php echo $signup_tac;?></label>
<div id="screen"></div>
<div id="screen-box"></div>
<script>window.termsUrl = '<?php echo "../$language/popup_$filename.php"?>';</script>

Javascript：

$(document).ready(function(){
    $('#popup_terms').click(function(){
        $("#screen-box").load(window.termsUrl, function(){
            $("#screen").css({
                "display": "block",
                "width": $(document).width(),
                "height": $(document).height(),
                opacity: .7,
            });

            $("#screen-box").css({
                "display": "block",
            });
        });
        return false; 
    });
});
于 2013-10-24T08:33:05.393 回答
0

为什么你不使用 jquery ui 对话框。您只需要设置容器并关联到 dialog ，然后您只需要使用 jquery 调用 open 或 close 方法。

于 2013-10-24T07:27:24.877 回答
0

我建议使用 JQuery UI Dialog 插件或 FancyBox 之类的插件。节省时间和头痛。这些插件使用 AJAX 加载内容，因此您不需要在第一个页面加载中包含内容，当您想使用更多这样的框时，这可能是一个问题。

于 2013-10-24T07:34:58.773 回答