Dynamic resizing text display on a limited screen space

JavaScript
1

A UI built using HTML and CSS has limited screen space. One of the elements is a div tag (<div id=“mtext”>) that will contain text of variable length. If the text is > 500 characters, I am displaying it as a link. When the user clicks the link, I want the text to be displayed in a layer above all the rest of the elements in the page. How can this be done using javascript…


//---------------------------------------
//       PSEUDO-CODE
//---------------------------------------

A div element that contains some text of variable length.
If the length exceeds say 500 characters, 
	Display it as truncated text. ( like "Example text...") 
	The entire truncated text becomes a link
	When the user clicks the link
		the content in the div element "pops out" to fill the screen above other elements on the page

Image showing truncated text… (before clicking)

Image showing text display after clicking the text…

2

wow. Thank you.

3

In a nutshell what you are trying to do is have a lightbox. You could do something like this:

var myContent = ‘the full content that needs to be displayed’;

If(!document.getElementById(‘lightbox’)) {
var myLightbox = document.createElement(‘div’);
myLightbox.id = ‘lightbox’;
myLightbox.data = myContent;
document.body.appendChild(myLightbox)
}
else {
document.getElementById(‘lightbox’).visibility = ‘visible’;
document.getElementById(‘lightbox’)display = block;
document.getElementById(‘lightbox’).data = myContent;
}

All the CSS you write for the lightbox should refer to a rule #lightbox {}