twocoders.de
 

programme/javascriptcss/fenster/fenster.html


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
<html>
    <head>
        <title>DIV - Fenster &ouml;ffnen<title>
        <link rel="stylesheet" type="text/css" href="fenster.css" />
        <script type="text/javascript">
            function open_window()
            {
                document.getElementById("background").style.display = "block";
                document.getElementById("fenster").style.display = "block";
            }
            
            function close_window()
            {
                document.getElementById("background").style.display = "none";
                document.getElementById("fenster").style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id="background">
            <div id="fenster">
                Hier im Fenster muss ja auch irgendwas stehen, hier eine Tabelle:<br/>
                <table border="1" cellpadding="3" cellspacing="0">
                    <tr>
                        <td>1|1</td>
                        <td>1|2</td>
                        <td>1|3</td>
                    </tr>
                    <tr>
                        <td>2|1</td>
                        <td>2|2</td>
                        <td>2|3</td>
                    </tr>
                    <tr>
                        <td>3|1</td>
                        <td>3|2</td>
                        <td>3|3</td>
                    </tr>
                </table><br/>
                <button onclick="close_window()">Fenster schlie&szlig;en <img src="cancel.png" alt="x" border="0" /></button>
            </div>
        </div>
        <button onclick="open_window()">Fenster &ouml;ffnen</button>
        Hier kommt jetzt ein F&uuml;lltext, damit man sieht wie das Fenster vor dem Inhalt liegt:<br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat, nulla eu gravida porta, erat dolor dictum odio, at vehicula sem risus non dui. In euismod feugiat rhoncus. Integer at nisl non lectus egestas rhoncus. Curabitur lobortis augue vitae nibh facilisis vulputate. Praesent lectus leo, elementum sit amet dapibus nec, vehicula in dolor. Integer elit quam, accumsan et accumsan dapibus, tincidunt in nulla. Etiam nec sapien ut erat varius venenatis. Quisque erat nisl, pharetra non mattis in, adipiscing id nulla. Integer a sem urna. Nam dapibus dapibus ante, in ultricies nulla elementum id. Vivamus facilisis lacus vel erat varius ac suscipit neque mattis. Nulla lectus velit, bibendum a commodo nec, luctus et odio. Etiam eget lorem massa, vel porttitor tellus. Vivamus ut auctor sem.</p>
        <p>Fusce semper, eros ac dapibus tincidunt, sem nulla mattis mi, vitae ultrices lectus orci quis lectus. Praesent faucibus eros vitae augue blandit consectetur. Morbi non placerat justo. Fusce mauris ligula, pretium et scelerisque a, cursus euismod ante. Maecenas faucibus, turpis sed eleifend tincidunt, mauris erat suscipit tortor, vitae elementum dui tellus quis arcu. Phasellus viverra elit nec odio congue quis pharetra odio condimentum. Pellentesque sit amet arcu enim, ut commodo turpis. Curabitur urna nisl, venenatis a sollicitudin at, varius tristique erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sit amet tempor eros. Nulla blandit bibendum nunc, id lobortis ligula lacinia ac.</p>
        <p>Nullam odio enim, aliquet in sagittis sed, feugiat a augue. Nunc consequat imperdiet aliquam. Phasellus eros magna, gravida fringilla interdum a, pharetra sed metus. Pellentesque ac est vel nisl scelerisque ullamcorper. Sed posuere odio non quam pellentesque cursus. Proin sit amet mauris sed lacus commodo vehicula non id odio. Praesent lectus dui, porta id egestas quis, blandit eget risus. Maecenas auctor porttitor sem, ut bibendum magna porttitor sit amet. Etiam at elit tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque vehicula tempor. Proin gravida mauris quis ante gravida molestie. Curabitur ut diam velit, condimentum laoreet elit. Nulla facilisi. Curabitur accumsan enim at dolor elementum eget pulvinar tortor varius. Aenean tristique molestie feugiat. Praesent a venenatis orci. Morbi tincidunt pellentesque nulla, nec semper nulla laoreet id. Phasellus id ligula id erat egestas bibendum. Nam enim lacus, faucibus nec malesuada in, ultricies at sapien.</p>
        <p>Cras posuere interdum tortor, et tristique felis egestas vehicula. Aliquam erat volutpat. Integer ornare est ut dolor pretium tincidunt. Pellentesque at arcu lacinia odio commodo ultricies nec sed diam. Ut ut augue vel lacus porta mollis. Nunc ligula erat, faucibus in varius ac, interdum eu leo. Cras sed dictum urna. Vestibulum sit amet nibh ac urna pellentesque interdum. Ut nec rhoncus tortor. Quisque at lacus justo. Integer pulvinar, eros sed pretium blandit, odio ligula ornare nulla, non vehicula massa quam vitae tellus. Praesent sed porttitor felis. Pellentesque laoreet nisi at neque accumsan vel malesuada leo molestie. Quisque a enim nisi. Morbi eget elit vel nibh gravida auctor. Sed lacus mi, porttitor sit amet mollis nec, tincidunt in neque. Ut vitae bibendum justo. Nam feugiat enim id lacus rutrum consectetur. Morbi ut arcu ut lacus vehicula rutrum sit amet non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </body>
</html>