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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <!DOCTYPE html>
<html>
<head>
<title>Modal Dialog Windows Using Javascript and CSS</title>
<style>
.blockbkg {
background-color: black;
opacity: 90%;
filter:alpha(opacity=90);
background-color: rgba(0,0,0,0.90);
width: 100%;
min-height: 100%;
overflow: hidden;
float: absolute;
position: fixed;
top: 0;
left: 0;
color: white;
}
.cont {
background-color: white;
color: black;
font-size: 16px;
border: 1px solid gray;
padding: 20px;
display:block;
position: absolute;
top: 10%;
left: 35%;
width: 400px;
height: 400px;
overflow-y: scroll;
}
.closebtn {
width: 20px;
height: 20px;
padding: 5px;
margin: 2px;
float: right;
top: 0;
background-image: url(x.png);
background-repeat: no-repeat;
background-position:center;
background-color: lightgray;
display: block;
}
.closebtn:hover {
cursor: pointer;
}
.normal {
background-color: lightblue;
width: 900px;
min-height: 200px;
padding: 20px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function () {
$("#closebtn").click(function () {
$("#dlg").hide('800', "swing", function () { $("#bkg").fadeOut("500"); });
});
$("#opn").click(function () {
if (document.getElementById('bkg').style.visibility == 'hidden') {
document.getElementById('bkg').style.visibility = '';
$("#bkg").hide();
}
if (document.getElementById('dlg').style.visibility == 'hidden') {
document.getElementById('dlg').style.visibility = '';
$("#dlg").hide();
}
$("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); });
});
});
</script>
</head>
<body>
<div class="normal">
<h1>Modal Dialogs</h1>
<p>
This is an example of how to create <strong>modal dialog popup windows</strong> for
your pages using javascript and CSS. Modal dialog popups are better than window-based
popups, because a new browser window is not required and the user does not have to leave
the page. This is great for when you need an easy way for the user to carry out a specific
action on the same page and control the modality of the window.
</p>
<p><a href="#" id="opn">Click here</a> to display the javascript modal popup dialog!</p>
</div>
<div class="blockbkg" id="bkg" style="visibility: hidden;">
<div class="cont" id="dlg" style="visibility: hidden;">
<div class="closebtn" title="Close" id="closebtn"></div>
<h1>Hello World!</h1>
<p>
This is a neat little trick to get a modal popup dialog box in your web pages
without disturbing the user experience or dsitracting them with popup windows or
new tabs...
</p>
<p>
The <strong>popup dialog</strong> uses javascript (jQuery) and CSS to create a modal dialog that
will retain focus over the parent window until it is closed. The trick is simple.
We use block-elements (divs) to create the dialog window. The CSS rules for <em>position</em>,
<em>float</em>, <em>top</em>, <em>left</em>/<em>right</em>, and <em>opacity</em> (or CSS3
transparency) allows us to create a semi-transparent div over the entire page, thereby creating
the illusion of modalness. The other div then takes focus over the center of the window.
</p>
<img src="https://sheriframadan.com/examples/uploadit/uploads/50f00e1434e8b.jpg" width="200" height="252">
<p>
We can also retain content view control over the modal dialog with the <em>overflow</em> CSS property.
This means no matter what we place inside of our dialog window the content will remain inside
of the defined bounds even if scrolling becomes necessary within the div.
</p>
</div>
</div>
</body>
</html> |
Modif d'un script pour demarrage automatiquement
Répondre avec citation
Partager