文本的灯箱

Lightbox for text

本文关键字：文本      更新时间：2023-09-26

我有一个锚标记。当它被点击时，我想打开一个带有一堆文本的灯箱（有些东西像"阅读条款和条件"）。我抬头一看，我遇到的大多数灯箱都是用于图像的。

有没有一种方法可以实现vaniallajavascript或简单的jquery？

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

我可以挂一个jsfiddle，但在这一点上，我只有锚标签。我不知道从哪里开始。

谢谢。

以下是我认为您正在寻找的，使用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

在制作灯箱时，只需使用即可将图像替换为文本

<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>
相关文章：