文字燈箱

我有一個錨標籤。當它被點擊時，我想要一個燈箱打開一堆文本（如「閱讀條款和條件」）。我擡起頭，我遇到的大多數燈箱都是用於圖像的。文字燈箱

有沒有一種方法可以做到vanialla javascript或簡單的jquery？

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

我可以把一個的jsfiddle但是，在這一點上我只是有錨標記。我不知道從哪裏開始。

謝謝。

來源

2014-09-10 user3861559

[jquery對話框]（http://jqueryui.com/dialog/）怎麼樣？ – imtheman 2014-09-10 23:24:55

這是一個很好的替代品。但我需要將它作爲一個燈箱來實現。這是一項要求。 – user3861559 2014-09-10 23:31:46

通過「lightbox」你的意思是「莫代爾」？ – imtheman 2014-09-10 23:33:27

以下是我認爲你正在尋找，使用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

來源

2014-09-10 23:48:52 imtheman

這正是我想要的。謝謝。它出於某種原因似乎不能在Firefox或任何其他瀏覽器上工作。我將自己的代碼修剪成只有你提供的小提琴的代碼，當它在小提琴上演奏時，仍然不能在我的系統上工作。我不知道爲什麼。 – user3861559 2014-09-11 00:05:54

@ user3861559你的代碼中引用了jQuery和jQuery UI嗎？ – imtheman 2014-09-11 00:18:20

您可以通過簡單地替代

<img />

元素的使用

<div>...</div>

做燈箱以文字替換圖像。這樣的事情：

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

來源

2014-09-11 00:45:54 ReverseEMF

回答

相關問題