andresmoschini/demopopup.html

## demopopup.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script language="javascript">
        $(function () {
            $(".DemoPopup").click(function () {
                //TODO: height and wifdth should be calculated
                $("#sb-container").height("5000px").width("10000px").show();
            });
            $("#sb-container").click(function () {
                $("#sb-container").hide();
            });
            $("#sb-body-inner").click(function (e) {
                e.stopPropagation();
            });
        })
    </script>
</head>
<body>
    <div id="sb-container" style="position: fixed; margin: 0; padding: 0; top: 0; left: 0;
        z-index: 999; text-align: left; display: none;">
        <div id="sb-body-inner" style="margin: 100px; background: white; height: 80px; width: 200px;">
            <table style="background: white; color: red">
                <tr>
                    <td>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo,
                        et ultrices nisi. Vivamus tortor mi, posuere porttitor ultrices ac, cursus nec elit.
                        Donec vitae velit eu ligula porta condimentum a ac erat. Vestibulum ante ipsum primis
                        in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mi nunc, molestie
                        tempor posuere eu, ullamcorper in dolor. Sed in diam purus. Nunc adipiscing tellus
                        eget augue condimentum quis aliquam urna placerat. Donec sed tortor ac est condimentum
                        pharetra et eu metus. Morbi sollicitudin ligula sed enim iaculis a iaculis nulla
                        consequat. Sed non tortor risus. Nunc ullamcorper ultricies mi, ac lacinia ipsum
                        cursus non. Aenean at tellus eget est posuere cursus. Morbi quis sapien nulla, a
                        ornare lorem. Fusce ac urna lacus, sit amet rutrum lacus. Nullam bibendum varius
                        lorem, sit amet condimentum urna laoreet in. Aliquam erat volutpat.
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <button class="DemoPopup">Demo Popup</button>
    <h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo,
        et ultrices nisi. Vivamus tortor mi, posuere porttitor ultrices ac, cursus nec elit.
        Donec vitae velit eu ligula porta condimentum a ac erat. Vestibulum ante ipsum primis
        in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mi nunc, molestie
        tempor posuere eu, ullamcorper in dolor. <a href="javascript:alert('link test')">link
            test</a> Sed in diam purus. Nunc adipiscing tellus eget augue condimentum quis
        aliquam urna placerat. Donec sed tortor ac est condimentum pharetra et eu metus.
        Morbi sollicitudin ligula sed enim iaculis a iaculis nulla consequat. Sed non tortor
        risus. Nunc ullamcorper ultricies mi, ac lacinia ipsum cursus non. Aenean at tellus
        eget est posuere cursus. Morbi quis sapien nulla, a ornare lorem. Fusce ac urna
        lacus, sit amet rutrum lacus. Nullam bibendum varius lorem, sit amet condimentum
        urna laoreet in. Aliquam erat volutpat.
    </p>
    <p>
        Nulla accumsan urna eu velit aliquet feugiat.<a href="javascript:alert('link test')">link
            test</a>Sed luctus hendrerit orci, a tristique nisi porta quis. Proin eget tincidunt
        nulla. Aenean sit amet dui sapien. Phasellus elementum, urna rhoncus consectetur
        viverra, risus nisi ullamcorper orci, et ornare mauris enim at libero. Nullam ac
        ornare enim. Nulla risus metus, vulputate ac aliquet et, pretium venenatis justo.
        Duis arcu ligula, adipiscing et aliquet id, semper quis neque. Sed ut venenatis
        elit. Nam nec turpis a turpis bibendum semper. Phasellus nec magna dui. Nam lacinia
        metus nec metus sollicitudin nec egestas quam vulputate.
    </p>
    <p>
        Nam eget lectus ac tortor aliquet semper. Suspendisse potenti. Mauris dapibus risus
        nec turpis malesuada mollis. Nunc id lobortis erat. Curabitur ut nisl ipsum, sollicitudin
        fringilla arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
        per inceptos himenaeos. Suspendisse feugiat, ipsum vitae tempus pharetra, ipsum
        tellus pulvinar odio, sit amet consectetur nisi augue sed quam. <a href="javascript:alert('link test')">
            link test</a>
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="javascript:alert('link test')">
            link test</a> Donec pulvinar erat augue, in porttitor nulla. Donec vel ligula
        nec arcu facilisis blandit eu a quam. Suspendisse convallis augue non magna suscipit
        porttitor. Ut at nisi ac velit dignissim porttitor id pretium metus. Fusce rutrum
        neque in neque bibendum pulvinar. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Fusce purus nisi, fermentum id euismod non, laoreet
        sed diam. Vestibulum lacinia sem elementum diam euismod vel vehicula ante feugiat.
        Aliquam nunc nibh, placerat nec dapibus quis, ornare id elit.
    </p>
    <p>
        Nulla vestibulum odio quis ipsum pellentesque quis porta neque facilisis. Nulla
        facilisi. Quisque cursus magna vel urna hendrerit laoreet. Donec vel purus id velit
        aliquam aliquet. Aliquam erat volutpat. Sed accumsan libero aliquet enim sodales
        lobortis. Donec a velit dolor. Ut malesuada nulla non est facilisis porttitor. Praesent
        posuere justo tempus velit lacinia mollis. Morbi fermentum vehicula ipsum sit amet
        placerat. Nulla pretium nisi felis.
    </p>
    <button class="DemoPopup">Demo Popup</button>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html>
	<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script language="javascript">
	$(function () {
	$(".DemoPopup").click(function () {
	//TODO: height and wifdth should be calculated
	$("#sb-container").height("5000px").width("10000px").show();
	});
	$("#sb-container").click(function () {
	$("#sb-container").hide();
	});
	$("#sb-body-inner").click(function (e) {
	e.stopPropagation();
	});
	})
	</script>
	</head>
	<body>
	<div id="sb-container" style="position: fixed; margin: 0; padding: 0; top: 0; left: 0;
	z-index: 999; text-align: left; display: none;">
	<div id="sb-body-inner" style="margin: 100px; background: white; height: 80px; width: 200px;">
	<table style="background: white; color: red">
	<tr>
	<td>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo,
	et ultrices nisi. Vivamus tortor mi, posuere porttitor ultrices ac, cursus nec elit.
	Donec vitae velit eu ligula porta condimentum a ac erat. Vestibulum ante ipsum primis
	in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mi nunc, molestie
	tempor posuere eu, ullamcorper in dolor. Sed in diam purus. Nunc adipiscing tellus
	eget augue condimentum quis aliquam urna placerat. Donec sed tortor ac est condimentum
	pharetra et eu metus. Morbi sollicitudin ligula sed enim iaculis a iaculis nulla
	consequat. Sed non tortor risus. Nunc ullamcorper ultricies mi, ac lacinia ipsum
	cursus non. Aenean at tellus eget est posuere cursus. Morbi quis sapien nulla, a
	ornare lorem. Fusce ac urna lacus, sit amet rutrum lacus. Nullam bibendum varius
	lorem, sit amet condimentum urna laoreet in. Aliquam erat volutpat.
	</td>
	</tr>
	</table>
	</div>
	</div>
	<button class="DemoPopup">Demo Popup</button>
	<h1>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo
	</h1>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum justo,
	et ultrices nisi. Vivamus tortor mi, posuere porttitor ultrices ac, cursus nec elit.
	Donec vitae velit eu ligula porta condimentum a ac erat. Vestibulum ante ipsum primis
	in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mi nunc, molestie
	tempor posuere eu, ullamcorper in dolor. <a href="javascript:alert('link test')">link
	test</a> Sed in diam purus. Nunc adipiscing tellus eget augue condimentum quis
	aliquam urna placerat. Donec sed tortor ac est condimentum pharetra et eu metus.
	Morbi sollicitudin ligula sed enim iaculis a iaculis nulla consequat. Sed non tortor
	risus. Nunc ullamcorper ultricies mi, ac lacinia ipsum cursus non. Aenean at tellus
	eget est posuere cursus. Morbi quis sapien nulla, a ornare lorem. Fusce ac urna
	lacus, sit amet rutrum lacus. Nullam bibendum varius lorem, sit amet condimentum
	urna laoreet in. Aliquam erat volutpat.
	</p>
	<p>
	Nulla accumsan urna eu velit aliquet feugiat.<a href="javascript:alert('link test')">link
	test</a>Sed luctus hendrerit orci, a tristique nisi porta quis. Proin eget tincidunt
	nulla. Aenean sit amet dui sapien. Phasellus elementum, urna rhoncus consectetur
	viverra, risus nisi ullamcorper orci, et ornare mauris enim at libero. Nullam ac
	ornare enim. Nulla risus metus, vulputate ac aliquet et, pretium venenatis justo.
	Duis arcu ligula, adipiscing et aliquet id, semper quis neque. Sed ut venenatis
	elit. Nam nec turpis a turpis bibendum semper. Phasellus nec magna dui. Nam lacinia
	metus nec metus sollicitudin nec egestas quam vulputate.
	</p>
	<p>
	Nam eget lectus ac tortor aliquet semper. Suspendisse potenti. Mauris dapibus risus
	nec turpis malesuada mollis. Nunc id lobortis erat. Curabitur ut nisl ipsum, sollicitudin
	fringilla arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
	per inceptos himenaeos. Suspendisse feugiat, ipsum vitae tempus pharetra, ipsum
	tellus pulvinar odio, sit amet consectetur nisi augue sed quam. <a href="javascript:alert('link test')">
	link test</a>
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="javascript:alert('link test')">
	link test</a> Donec pulvinar erat augue, in porttitor nulla. Donec vel ligula
	nec arcu facilisis blandit eu a quam. Suspendisse convallis augue non magna suscipit
	porttitor. Ut at nisi ac velit dignissim porttitor id pretium metus. Fusce rutrum
	neque in neque bibendum pulvinar. Cum sociis natoque penatibus et magnis dis parturient
	montes, nascetur ridiculus mus. Fusce purus nisi, fermentum id euismod non, laoreet
	sed diam. Vestibulum lacinia sem elementum diam euismod vel vehicula ante feugiat.
	Aliquam nunc nibh, placerat nec dapibus quis, ornare id elit.
	</p>
	<p>
	Nulla vestibulum odio quis ipsum pellentesque quis porta neque facilisis. Nulla
	facilisi. Quisque cursus magna vel urna hendrerit laoreet. Donec vel purus id velit
	aliquam aliquet. Aliquam erat volutpat. Sed accumsan libero aliquet enim sodales
	lobortis. Donec a velit dolor. Ut malesuada nulla non est facilisis porttitor. Praesent
	posuere justo tempus velit lacinia mollis. Morbi fermentum vehicula ipsum sit amet
	placerat. Nulla pretium nisi felis.
	</p>
	<button class="DemoPopup">Demo Popup</button>
	</body>
	</html>