Bonjour,

J'ai trouvé ce bout de code pour afficher une info tout au début de mon site.
Mais sauf que ce code ne 'sexecute qui si l'on clique.
Comment modifier ce code pour qu'il s'execute automatiquement sur ma page d'index.

Merci pour votre aide précieuse.

Cordialement.


Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>