Question

我在一个复选框旁边有一个标签，用于接受条款＆amp;条件。目前有一个简单的

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

这似乎不是正确的方法，因为在查看源代码时，条款中的文本将是可见的，我不会怀疑。

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

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

Answer 2

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

Answer 3

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

如何显示条款＆amp;条件正确吗？

3 个答案: