Question

我有一个锚标记。当点击它时，我想要一个灯箱打开一堆文字（有点像“阅读条款和条件”）。我抬起头来，我遇到的大多数灯箱都是用于图像。

有没有办法可以做vanialla javascript或简单的jquery？

<a class="link" rel="lightbox"> Anti-Spam Policy</a>

我可以提出一个jsfiddle但是，此时我只有一个锚标签。我不知道从哪里开始。

感谢。

Answer 1

我认为您正在寻找的是jQuery UI：

<强> HTML

<div id="policy-text" style="display:none;">Bacon ipsum dolor sit amet tri-tip qui cupidatat tenderloin cillum consectetur. Porchetta pastrami dolore deserunt kevin anim.
Aute cow cillum, sausage fatback enim in mollit hamburger ham nostrud labore meatball. Nulla enim jowl, jerky quis magna spare ribs ut pork loin...</div>

<a id="policy" href="#" class="link" rel="lightbox">Anti-Spam Policy</a>

<强>的jQuery

$("#policy-text").dialog({
    title: "Anti-Spam Policy",
    autoOpen: false,
    modal: true,
    height: 400,
    width: 500
});
$("#policy").click(function(){
    $("#policy-text").dialog("open");
});

JSFiddle

Answer 2

只需使用

，即可在使用灯箱时用文字替换图像

<div>...</div>

取代

<img />

元素。像这样：

<div id="my_light_box">
    <h1>Anti-Spam Policy</h1>
    <p>I won't SPAM you for nothin'--fersure!!</p>
</div>

所以，这只是如何实现链接的问题。怎么样：

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title;?></title>

<style>
    body {
        background-color:blueviolet;

    }
    div#main_container  {
        width: 1000px;
        margin: 30px auto;
        box-shadow: 2px 2px 20px 7px #303;
    }
    div#main_container div#content {
        background-color: #ffd;
        padding:15px 20px;
        vertical-align: top;
        text-align: center;
    }
    div#lightbox {  /* this is, actually, what creates the "lowered lights" effect */
        position:fixed;
        top:0;        /* Tack the dark 'curtain' to the upper-left corner... /*
        left:0; 
        width:100%;   /* ...stretch it across the screen... */
        height:100%;   /* ...and pull it to the bottom of the screen. */
        background:url('lightbox_bkgnd.png') repeat;   /* lightbox_bkgnd.png is a solid black 8x8 pixel bitmap with alpha set to around 75% to produce "low light" effect */
    }
    div#lightbox_content {
        background-color:white;
        border: 15px solid #999;
        padding: 3em;
        position: static;  /* didn't have time to test this in other browsers than Chrome, so this may not be necessary */
        width: 300px;
        margin: 50px auto;  /* to center it */
        text-align: center;
    }
</style>

<script type="text/javascript" src="/*url to a jquery.js implementation*/"></script>
<script>
$(document).ready(function() { 
    // Hide the lightbox on load.
    $('#lightbox').hide();  // also could do a 'fade in' here.
    // Show the lightbox when the link is clicked
    $('#lightbox_link').click(function() {
        $('#lightbox').show();
    });
    // Re-hide the lightbox when the box is clicked
    $('#lightbox').click(function() {
        $(this).hide();  // and a 'fade out' here.
    });
});
</script>
</head>
<body>
    <div id="main_container">
        <div id="content">
            <h1>Lightbox Demo</h1> 
            <a href="#" id="lightbox_link">Anti-SPAM Policy</a>
        </div>
        <div id="lightbox">
            <div id='lightbox_content'>
                <h1>Anti-Spam Policy</h1>
                <p>I won't SPAM you for nothin'--fersure!!</p>
                <p><em>Click box to close</em></p>
            </div>
        </div>
    </div>
</body>
</html>

灯箱文字

2 个答案: