Centrer fenêtre modale malgré le redimensionnement de la page

Version imprimable

Bonjour le forum,
J'ai besoin d'aide au sujet d'un code d'une fenêtre modale que j'avais trouvé il y a quelque temps déjà je ne sais plus trop ou.
En effet j'aimerais centre cette fenêtre modale quelques soit le dimensionnement de la page sans perdre la possibilité de déplacer la fenêtre et de la fermer.
Cela fait plusieurs jours que j'essaye sans succès voire pire, je massacre le code et plus rien ne fonctionne, quelqu'un pourrait m'aider ?
Merci d'avance de votre aide, ci-dessous le code:

Code:

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
<html>
<head>
<title>Scripts javascript : Aperçu</title>
<script language="JavaScript1.2">
// Script Source: CodeLifter.com
// Copyright 2003
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
 
function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  hotDog=isIE ? event.srcElement : e.target;  
  while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode; }  
  if (hotDog.id=="titleBar"){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd; }}
 
function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  }
 
function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;   }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);  }
}
 
function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}
 
function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
 
</script>
</head>
<body>
 
<br /><p class="tt" >Fenêtre non popup</p><br /><br />
 
<div id="theLayer" style="position:absolute;width:250px;left:100;top:50;visibility:visible">
<table border="0" width="250" bgcolor="#FFCC00" cellspacing="0" cellpadding="5">
<tr><td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr><td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Verdana" size="2" color="#000000"><b>Titre de la fenêtre</b></font>
</layer></ilayer></td>
<td style="cursor:hand" valign="top"><a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
</td></tr>
<tr><td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<font face="Verdana" size="2" color="#000080">Vous pouvez déplacer cette fenêtre comme un simple fenêtre windows.<br>
Vous pouvez bien sur intégrer des <b>balises HTML</b>, liens hypertextes etc...<br><br>
</font>
</td></tr></table> 
</td></tr></table>
</div>
<br><br>
Voici les codes qui permettent de <a href="javascript:showMe();">Montrer</a> la fenêtre ou de la 
<a href="javascript:hideMe();">Cacher</a>
 
</body>
</html>

Meilleures salutations

17/07/2023, 13h36
SpaceFrog

il semble y avoir une fonction de centrage

Code:

function dd(e)

ça vaut le coup de tenter

Code:

window.onresize=dd;
17/07/2023, 14h10
nini007
Bonjour SpaceFrog,
Je te remercie pour ton message, j'ai déjà essayé avec "window.onresize" et "window.onload" sans succès.
Je ne suis pas un spécialiste du javascript, je les ai peut être mal utilisés.
Code:

1 2 3 4 5 6 7 window.onresize = function () { centerModal(); }; window.onload = function () { centerModal(); };

J'ai réussi à améliorer le code mais ce que je comprends pas !
C'est pour quoi cela fonctionne uniquement si je déplace ma fenêtre modale et non dès le chargement de la page ?!?:mur:

A l'aide!:help:

Code:

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
<html>
<head>
<title>Scripts javascript : Aperçu</title>
<script language="JavaScript1.2">
// Script Source: CodeLifter.com
// Copyright 2003
var isIE = document.all;
var isNN = !document.all && document.getElementById;
var isN4 = document.layers;
var isHot = false;
var topDog, whichDog, hotDog;
var offsetx = 0;
var offsety = 0;
var nowX = 0;
var nowY = 0;
var ddEnabled = false;
 
function centerModal() {
  var windowWidth = isIE ? document.documentElement.clientWidth : window.innerWidth;
  var windowHeight = isIE ? document.documentElement.clientHeight : window.innerHeight;
  var modalWidth = parseInt(whichDog.style.width);
  var modalHeight = parseInt(whichDog.style.height);
  var leftPos = (windowWidth - modalWidth) / 2;
  var topPos = (windowHeight - modalHeight) / 2;
 
  whichDog.style.left = leftPos + "px";
  whichDog.style.top = topPos + "px";
}
 
function ddInit(e) {
  topDog = isIE ? "BODY" : "HTML";
  whichDog = isIE ? document.all.theLayer : document.getElementById("theLayer");
  hotDog = isIE ? event.srcElement : e.target;
  while (hotDog.id != "titleBar" && hotDog.tagName != topDog) {
    hotDog = isIE ? hotDog.parentElement : hotDog.parentNode;
  }
  if (hotDog.id == "titleBar") {
    offsetx = isIE ? event.clientX : e.clientX;
    offsety = isIE ? event.clientY : e.clientY;
    nowX = parseInt(whichDog.style.left);
    nowY = parseInt(whichDog.style.top);
    ddEnabled = true;
    document.onmousemove = dd;
  }
}
 
function dd(e) {
  if (!ddEnabled) return;
  whichDog.style.left = isIE ? nowX + event.clientX - offsetx : nowX + e.clientX - offsetx;
  whichDog.style.top = isIE ? nowY + event.clientY - offsety : nowY + e.clientY - offsety;
  return false;
}
 
function ddN4(whatDog) {
  if (!isN4) return;
  N4 = eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
  N4.onmousedown = function (e) {
    N4.captureEvents(Event.MOUSEMOVE);
    N4x = e.x;
    N4y = e.y;
  };
  N4.onmousemove = function (e) {
    if (isHot) {
      N4.moveBy(e.x - N4x, e.y - N4y);
      return false;
    }
  };
  N4.onmouseup = function () {
    N4.releaseEvents(Event.MOUSEMOVE);
  };
}
 
document.onmousedown = ddInit;
document.onmouseup = Function("ddEnabled=false");
 
window.onresize = function () {
  if (whichDog && whichDog.style.visibility === "visible") {
    centerModal(); // Appeler la fonction pour centrer la fenêtre modale lors du redimensionnement de la fenêtre du navigateur
  }
};
 
</script>
</head>
<body>
 
<br /><p class="tt" >Fenêtre non popup</p><br /><br />
 
<div id="theLayer" style="position:absolute;width:250px;left:100;top:50;visibility:visible">
<table border="0" width="250" bgcolor="#FFCC00" cellspacing="0" cellpadding="5">
<tr><td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr><td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Verdana" size="2" color="#000000"><b>Titre de la fenêtre</b></font>
</layer></ilayer></td>
<td style="cursor:hand" valign="top"><a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
</td></tr>
<tr><td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<font face="Verdana" size="2" color="#000080">Vous pouvez déplacer cette fenêtre comme un simple fenêtre windows.<br>
Vous pouvez bien sur intégrer des <b>balises HTML</b>, liens hypertextes etc...<br><br>
</font>
</td></tr></table> 
</td></tr></table>
</div>
<br><br>
Voici les codes qui permettent de <a href="javascript:showMe();">Montrer</a> la fenêtre ou de la 
<a href="javascript:hideMe();">Cacher</a>
 
</body>
</html>

Salut nini007,

Je n’ai pas repris ton code car il ne fonctionnait pas chez moi. Je te propose un code sur du modal que j’avais fait il y a quelque temps en y incluant ta fonction pour le centrage du modal lors de la redimension de la fenêtre du navigateur.
Ci-cela peut aider ?

Code:

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
 
  <body>
    <div id="container">
      <script>
        var nameModal = ['A', 'B', 'C', 'D', 'E', 'F']
        container = document.getElementById('container')
 
        for (var i = 0; i < nameModal.length; i += 1) {
          let creaButton = document.createElement('button')
          let creaModal = document.createElement('div')
          let creaModalElements
 
          creaButton.setAttribute('class', 'button-Show-Modal')
          creaButton.innerHTML = `Fenêtre ${nameModal[i]}`
          container.append(creaButton)
 
          creaModal.setAttribute('class', 'modal-Window')
          creaModalElements = `<div class="modal-Bar"><div class="titre-Bar">`
          creaModalElements += `<p style="margin: 0px 5px 0px 10px;text-align: left;overflow: hidden;text-overflow: ellipsis;">${creaButton.textContent}</p></div><div class="switch"><p class="reduce-button"></p>`
          creaModalElements += `<p class="resize-button"></p><p class="close-button"></p></div></div>`
          creaModalElements += `<section><p>Modal (${creaButton.textContent})</p></section><p class="resize-window"></p><hr class="resize-right"><hr class="resize-bottom">`
 
          creaModal.innerHTML = creaModalElements
          container.append(creaModal)
        }
      </script>
    </div>
    <script src="js/script.js" defer></script>
    <script src="js/moveresize.js" defer></script>
  </body>
</html>

Code:

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
body {
  user-select: none;
  overflow: hidden;
  background-color: #ccc;
  color: #000;
  margin: 0px;
}
 
.button-Show-Modal {
  cursor: pointer;
  width: 150px;
  height: 30px;
  margin: 10px;
  font-size: 1.1em;
  display: block;
  background-color: #ccc;
}
 
.button-Show-Modal:hover {
  background-color: #d4d4d4;
}
 
.modal-Window {
  position: absolute;
  width: 750px;
  min-width: 200px;
  display: none;
  background-color: #ececec;
  height: 500px;
  border: 2px solid rgb(5, 67, 176);
  overflow: hidden;
  resize: none;
  box-shadow: 6px 6px 15px 1px rgba(0,0,0,0.20);
  z-index: 2;
}
 
section {
  position: inherit;
  top: 35px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
}
 
.resize-window {
  position: absolute;
  bottom: 2px;
  right: 2px;
  line-height: 13px;
  margin: 0px;
  color: #0543b0;
  background-color: transparent !important;
  padding: 0px;
  width: 14px;
  z-index: 1;
}
 
.resize-window:hover {
  cursor: nwse-resize;
}
 
.resize-window::after {
  content: "\0025E2";
}
 
.resize-button::before {
  content: var(--check-primary, "");
}
 
.resize-button {
  position: absolute;
  cursor: pointer;
  right: 40px;
  width: 40px;
  margin-top: 0px;
}
 
.resize-button:hover {
  background-color: #0a56dc;
  font-weight: bold;
}
 
.reduce-button::after {
  content: "\002212";
}
 
.reduce-button {
  position: absolute;
  cursor: pointer;
  right: 80px;
  width: 40px;
  margin-top: 0px;
}
 
.reduce-button:hover {
  background-color: #0a56dc;
  font-weight: bold;
}
 
.close-button {
  position: absolute;
  cursor: pointer;
  right: 0px;
  top: 0px;
  width: 40px;
  margin-top: 0px;
  line-height: 1.5;
}
 
.close-button::before {
  content: "\002A09";
}
 
.close-button:hover {
  background-color: red;
  font-weight: bold;
}
 
.close-button:active,
.resize-button:active,
.reduce-button:active {
  opacity: 0.7;
}
 
 
.disable p.close-button:hover,
.disable p.resize-button:hover,
.disable p.reduce-button:hover {
  opacity: 0.7;
  background-color: #8e8e8e !important;
}
 
 
.disable {
  background-color: #e6e6e8;
  border: 2px solid #8e8e8e;
  color: #7d7d7d;
}
 
.disable>.modal-Bar:hover,
.disable:hover>.modal-Bar {
  background-color: #b8b8b8
}
 
.disable>.modal-Bar,
.disable>.resize-window {
  background-color: #a6a7a9;
  color: #a6a7a9;
  cursor: default;
}
 
.disabled-move>.modal-Bar {
  cursor: default;
}
 
.disabled-move>.resize-right,
.disabled-move>.resize-bottom {
  cursor: default;
  pointer-events: none;
}
 
.switch {
  height: inherit;
  line-height: 1.5;
}
 
.modal-Bar {
  height: 30px;
  background-color: #0543b0;
  color: white !important;
  text-align: center;
  cursor: default;
  font-size: 1.1em;
  line-height: 30px;
  display: grid;
  align-items: start;
  justify-content: inherit;
  grid-template-columns: auto 120px;
}
 
.modal-Bar:active{
  cursor: move;
}
 
.titre-Bar {
  height: inherit;
  white-space: nowrap;
  overflow: hidden;
}
 
.resize-bottom {
  cursor: ns-resize;
  position: inherit;
  width: 100%;
  bottom: 0px;
  padding-top: 6px;
  margin-bottom: 0px;
  background-color: transparent;
  border: none;
}
 
.resize-right {
  cursor: ew-resize;
  margin-top: 0px;
  position: inherit;
  height: 100%;
  top: 0px;
  right: 0px;
  padding-left: 6px;
  border: none;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//script.js
const buttonsModal = document.getElementsByClassName('button-Show-Modal')
var topleft = [20, 20], modalSelect
 
for (const buttonModalSelect of buttonsModal) {
    buttonModalSelect.addEventListener("click", () => {
        buttonModalSelect.nextElementSibling.style.cssText = `display: block; top: ${topleft[0]}%; left: ${topleft[1]}%; height: 35%; width: 35%;`
        buttonModalSelect.style.pointerEvents = 'none'
        buttonModalSelect.style.opacity = '0.5'
        topleft[0] += 3
        topleft[1] += 2
        moveResizeModal(buttonModalSelect.nextElementSibling, buttonModalSelect)
    });
}

Code:

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
//moveresize.js
function moveResizeModal(modal, buttonModalShow) {
    const button_Reduce = modal.querySelector('.reduce-button')
    const button_Resize = modal.querySelector('.resize-button')
    const button_Close = modal.querySelector('.close-button')
    const titre_Bar = modal.querySelector('.titre-Bar')
    const window_Resize = modal.querySelector('.resize-window')
    const resize_right = modal.querySelector('.resize-right')
    const resize_bottom= modal.querySelector('.resize-bottom')
    var resizeSelect, offset = { x: 0, y: 0 }, coord = [modal.offsetTop, modal.offsetLeft, modal.offsetHeight, modal.offsetWidth]
 
    button_Resize.style.setProperty('--check-primary', '"◹"');
    modalZindex()
 
    //move
    titre_Bar.addEventListener('mousedown', moveMouseDown, false)
    window.addEventListener('mouseup', moveMouseUp, false)
 
    //resize
    window_Resize.addEventListener('mousedown', resizeMouseDown, false)
 
    //resize right
    resize_right.addEventListener('mousedown', resizeMouseDown, false)
 
    //resize bottom
    resize_bottom.addEventListener('mousedown', resizeMouseDown, false)
 
    //boutons and title bar resize
    button_Resize.addEventListener('click', resizeButtom, false)
    titre_Bar.addEventListener('dblclick', resizeButtom, false)
 
    //z-index
    modal.addEventListener('mousedown', modalZindex, false)
 
 
    // fenêtre modal centrée après un redimensionnement du navigateur
    function centerModal() {
        var windowWidth = document.documentElement.clientWidth, windowHeight = document.documentElement.clientHeight,
        leftPos = (windowWidth - modal.clientWidth) / 2, topPos = (windowHeight - modal.clientHeight) / 2
         modal.style.left = `${leftPos}px`
         modal.style.top = `${topPos}px`
      }
 
    function modalZindex() {
        const modals = document.getElementsByClassName('modal-Window')
        for (const selmodal of modals) {
            selmodal.style.zIndex = ''
            selmodal.classList.add('disable')
        }
        modal.style.zIndex = '4'
        modal.classList.remove('disable')
    }
 
    function resizeButtom(e) {
        let symbol = button_Resize.style.cssText.replace(/\s/g, '')
        button_Reduce.removeAttribute('style')
        window_Resize.removeAttribute('style')
        modal.classList.remove('disabled-move')
 
        organiseReduce()
 
        if (symbol == '--check-primary:"◹";') {
            modal.style.cssText += `top: 0px; left: 0px; height: ${window.innerHeight}px; width: ${window.innerWidth}px;`
            button_Resize.style.setProperty('--check-primary', '"◺"');
        } else {
            modal.style.cssText += `top: ${coord[0]}px; left: ${coord[1]}px; height: ${coord[2]}px; width: ${coord[3]}px;`
            button_Resize.style.setProperty('--check-primary', '"◹"');
        }
        e.stopImmediatePropagation();
    }
 
    function moveMouseUp() {
        window.removeEventListener('mousemove', modalMove, true)     
        window.removeEventListener('mousemove', modalResize, true)
        modal.style.cursor ='default'
    }
 
    function moveMouseDown(e) {
        offset.x = e.clientX - modal.offsetLeft
        offset.y = e.clientY - modal.offsetTop
        modal.classList.contains('disabled-move') == false && window.addEventListener('mousemove', modalMove, true)
    }
 
    function modalMove(e) {
        if (window.innerWidth > modal.offsetWidth || window.innerHeight > modal.offsetHeight) {
            var c = { top: (e.clientY - offset.y), left: (e.clientX - offset.x), minLeft: 0, maxLeft: (window.innerWidth - modal.offsetWidth), minTop: 0, maxTop: (window.innerHeight - modal.clientHeight) }
            c.left = c.left < c.minLeft ? c.minLeft : c.left //min left
            c.left = c.left > c.maxLeft ? c.maxLeft : c.left //max left
            c.top = c.top < c.minTop ? c.minTop : c.top //min top
            c.top = c.top > c.maxTop ? c.maxTop : c.top //max top           
            modal.style.top = `${c.top}px`
            modal.style.left = `${c.left}px`
            coord = [modal.offsetTop, modal.offsetLeft, modal.offsetHeight, modal.offsetWidth]
        }
    }
 
    function resizeMouseDown(e) {       
        resizeSelect = e.target.className
        offset.x = (e.clientX - modal.offsetWidth)
        offset.y = (e.clientY - modal.offsetHeight)
        window.addEventListener('mousemove', modalResize, true)
    }
 
    function modalResize(e) {
        var c = { height: (e.clientY - offset.y), width: (e.clientX - offset.x), maxWidth: window.innerWidth, maxHeight: window.innerHeight, windowHeight: ((e.clientY - offset.y) + modal.offsetTop), windowWidth: ((e.clientX - offset.x) + modal.offsetLeft) }
        c.width = c.windowWidth >= c.maxWidth ? (c.maxWidth - modal.offsetLeft) : c.width
        c.height = c.windowHeight >= c.maxHeight ? (c.maxHeight - modal.offsetTop) : c.height
 
        modal.style.cursor = window.getComputedStyle(modal.querySelector('.' + resizeSelect)).cursor
 
        c.height < 100 ? c.height = 100 : null
        c.maxWidth == c.width && c.maxHeight == c.height ? button_Resize.style.setProperty('--check-primary', '"◺"'): button_Resize.style.setProperty('--check-primary', '"◹"')   
        resizeSelect == "resize-window" ? (modal.style.height = `${c.height}px`) & (modal.style.width = `${c.width}px`) : null
        resizeSelect == "resize-bottom" ? modal.style.height = `${c.height}px`: null
        resizeSelect == "resize-right" ? modal.style.width = `${c.width}px`: null
 
        coord = [modal.offsetTop, modal.offsetLeft, modal.offsetHeight, modal.offsetWidth]
    }
 
    function organiseReduce() {
        let reduceLeft = 0
        for (const modalReduce of document.getElementsByClassName('disabled-move')) {
            modalReduce.style.cssText += `height:25px; width:200px; top:auto; bottom:0px;left:${reduceLeft}px;`
            reduceLeft += 200
        }
    }
 
    //reduce
    button_Reduce.addEventListener('click', function (e) {
        button_Resize.style.setProperty('--check-primary', '"▭"');
        coord = [modal.offsetTop, modal.offsetLeft, modal.offsetHeight, modal.offsetWidth]
        modal.classList.add('disabled-move')
        modal.style.cssText += 'left:0px;'       
        this.style.cssText = 'pointer-events:none; color:gray'
        window_Resize.style.display = 'none'
        organiseReduce()
    })
 
    //close modal
    button_Close.addEventListener('click', function (e) {
        button_Resize.removeAttribute('style')
        button_Reduce.removeAttribute('style')
        window_Resize.removeAttribute('style')
        buttonModalShow.removeAttribute('style')
        modal.removeAttribute('style')
        modal.classList.remove('disabled-move')
        organiseReduce()
        topleft[0] -= 3
        topleft[1] -= 2
        e.stopImmediatePropagation();
    })
 
    window.onresize = function () {
        centerModal(); // Appeler la fonction pour centrer la fenêtre modale lors du redimensionnement de la fenêtre du navigateur
      }
}

18/07/2023, 16h06
nini007

Salut ASCIIDEFOND,

Je te remercie pour ta réponse, chez moi ton code ne fonctionne pas non plus (je ne peux pas déplacer et fermer les fenêtres), décidément.
Je vais essayer de retravailler le JS et le HTML, peut-être c'est le HTML qui pose problème problème, à vérifier.
Peut-être j'aurais une réponse du forum ;)

@+

jour

c'est ce que j appel un très très vieux code essai cette mise a jour plus d’actualité

Code:

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
<!DOCTYPE html>
<html>
<title>fenetres</title>
<head>
 
<script>
 
var modal={
 
elemdown:null,
decx:null,
decy:null,
el:null,
 
dd:function(evt){
 
                if(evt.type=="mousedown"){
                        modal.elemdown=evt.target
 
                        modal.decx=evt.pageX
                        modal.decy=evt.pageY
 
                        evt.preventDefault();
                        document.documentElement.addEventListener("mousemove", modal.posi, false)
                        modal.elemdown.addEventListener("mouseup", modal.dd, false)
                        modal.elemdown.removeEventListener("mousedown", modal.dd, false)
 
                        modal.rar=false;
                }
 
                if(evt.type=="mouseup"){
                        document.documentElement.removeEventListener("mousemove", modal.posi, false)
                        modal.elemdown.removeEventListener("mouseup", modal.dd, false)
                        modal.elemdown.addEventListener("mousedown", modal.dd, false)
                        modal.rar=true;
                }
        },
 
posi:function(evt){
 
                var setX =evt.pageX;
                var setY =evt.pageY;
                modal.el.style.left=modal.el.offsetLeft+(setX-modal.decx)+"px";
                modal.el.style.top=modal.el.offsetTop+(setY-modal.decy)+"px";
                modal.decx=setX
                modal.decy=setY
        },
        
centrer:function(){
                var dde=document.documentElement;
                var dst=document.body.scrollTop || document.documentElement.scrollTop;
                var dsl=document.body.scrollLeft || document.documentElement.scrollLeft;
 
                modal.el.style.top=(dde.clientHeight-modal.el.offsetHeight)/2+dst+"px";
                modal.el.style.left=((dde.clientWidth-modal.el.offsetWidth)/2)+dsl+'px';
        },
        
        hideMe:function (){
 
                modal.el.style.visibility="hidden";
                return false
},
 
        showMe:function (){
 
                modal.el.style.visibility="visible";
                return false
},
 
 
init:function(){
 
        modal.el=document.getElementById('ta').parentNode.parentNode.parentNode
 
        document.getElementById('ta').addEventListener("mousedown", modal.dd, false);
        
        document.getElementById('ta').getElementsByTagName('span')[1].onclick=modal.hideMe;
        
        window.addEventListener('resize',modal.centrer,false);
        
        modal.centrer();
        
        }
 
}
addEventListener("load", modal.init, false);
 
 
</script>
 
</head>
 
<body>
 
<table style='width:250px;position:absolute;background-color:#FFCC00;border:2px solid #FFCC00'  cellspacing="0" cellpadding="5">
 
<tr><td style='height:20px;color:white;cursor:move' id="ta">
 
<span style='float:left;font-weight:bold'>Titre de la fenêtre</span>
 
<span style='float:right;cursor:pointer'>X</span>
</td>
 
<tr><td style='background-color:white'>
 
<font face="Verdana" size="2" color="#000080">Vous pouvez déplacer cette fenêtre comme un simple fenêtre windows.<br>
Vous pouvez bien sur intégrer des <b>balises HTML</b>, liens hypertextes etc...<br><br>
</font>
</td></tr></table>
 
 
Voici les codes qui permettent de <a href="#" onclick="modal.showMe();">Montrer</a> la fenêtre ou de la 
<a href="#" onclick="modal.hideMe();">Cacher</a>
 
</body>
</html>

20/07/2023, 22h08
nini007

Salut melka one,
Je te remercie pour ton message, c'est exactement ça, c'est top, tu me sauves la vie :bravo:
Oui en effet c'est un vieux code qui sort de je sais où ;)

Meilleures salutations

Citation:

Envoyé par melka one

c'est ce que j appel un très très vieux code essai cette mise a jour plus d’actualité

Oui, ce code est vieux. Il correspond à une époque où tous les navigateurs n'avaient pas intégré la propriété CSS flex.
Car de nos jours, aucun JS n'est nécessaire pour centrer une boîte

Voici ma proposition :

Code:

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
<!DOCTYPE HTML>
<head>
<style>
#modale{
    position: fixed;
    z-index:100;
    top:0; left:0;
    width:100%;
    height: 100%;
    background-color: rgba(100,100,100,0.4);
}
.normal {display: none;}
.modal {
    display: flex; justify-content: center; align-items: center;
}
form{
    padding: 1em;
    background-color: #fff;
    width:30em
}
input {margin: 0.5em}
</style>
</head>
<body>
<h1>Mapage</h1>
<input type=button onclick="showhide()" value="Montrer la modale">
<div id=modale class=normal>
    <form>
    <p><input type=button onclick="showhide()" value="Cachez-moi"></p>
        label de l'inpout<input><br>
        label de l'inpout<input><br>
        <input type=submit value=Enregistrer>
    </form>
</div>
<script>
function showhide() {
    document.getElementById('modale').classList.toggle('modal');
}
</script>