Popup non adaptée pour mobile

**drogba72** · 27/11/2021, 02h58

Bonjour à tous,

Je suis confronté à une diffculté que je n'arrive pas à résoudre... Adapter mon code afin que ce dernier soit compatible avec une navigation utilisateur mobile.
Le rendu qui me pose problème est l'affichage de la popup.

En effet, utilisant chrome, il est impossible de fermer la popup sur mobile (la croix n'est pas visible). De plus si le texte contient des phrases trop longues, ce dernier est tronqué.
J'imagine qu'il s'agit d'un travail à réaliser en pourcentage mais je n'arrive pas à trouver l'endroit stratégique... Je m'en remets donc à une âme charitable svp

Merci par avance

Mon code PHP:

Code html :

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
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="fr" >
<head>
  <meta charset="UTF-8">
  <title>Christmas Way</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./candy_css.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
 
</head>
<body>
 
  <!--<div id='candy'>
    <div id='candy-loader'></div>
  </div>
   wish -->
  <div id="wish" class="about-box" style="padding-bottom: 0;">
    <div class="about-a1">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="title-box">
              <h2>Christmas Way</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- wish us -->
 
<!-- partial:index.partial.html -->
<section id="modal">
  <div class="wrapper">
    <div class="content">
      <div class="close"></div>
      <div class="box"></div>
    </div>
  </div>
</section>
<section id="calendar" class="collectonme">
  <div id="day-labels">
    <div class="label">Dim</div>
    <div class="label">Lun</div>
    <div class="label">Mar</div>
    <div class="label">Mer</div>
    <div class="label">Jeu</div>
    <div class="label">Ven</div>
    <div class="label">Sam</div>
  </div>
  <div id="one" class="week">
    <div class="day noDate"></div>
    <div class="day noDate"></div>
    <div class="day noDate"></div>
    <div class="day">
      <span id="dayclick" class="date">1</span>
      <div class="surprise">
        <h2>En route pour noël</h2>
        <p>Premier jour, première mission : un top 3 !<br>Je t'ai préparé une petite sélection pour ce premier jour.<br>Ta mission est donc de toutes les déguster ;)Impatient de connaitre ton top 3 </p>
        <a class="button" href="video.html" >Détails</a>
      </div>
 
    </div>
    <div class="day">
      <span id="dayclick" class="date">2</span>
      <div class="surprise">
        <h2>Pour ton deuxième jour, une revue tout en couleur</h2>
        <p>Je suis certain que ça va te rappeler quelque chose... </p>
        <a class="button" href="photo.html" >Gogogo</a>
      </div>
    </div>
    <div class="day">
      <span class="date" onclick="clickMe()">3</span>
      <div class="surprise">
        <h2>And Now, to Waste Your Time</h2>
        <p>This site has some great illustrations, some funny random stuff, and overall is just a champion time-waster, for those of you tired of Buzzfeed hell.</p>
        <a href="http://www.booksofadam.com" target="_blank" class="button">Visit Books of Adam</a>
      </div>
    </div>
    <div class="day">
      <span class="date">4</span>
      <div class="surprise">
        <h2>And Now - A History of Web Design</h2>
        <p>Web design has been around for a while now, and it has a storied history. Webs.com and AmeriCommerce have put together a fun infographic to walk you down memory lane.</p>
        <a class="button" href="http://www.webs.com/blog/2015/02/04/history-web-design-infographic/" target="_blank">View the Infographic</a>
      </div>
    </div>
  </div>
  <div id="two" class="week">
    <div class="day">
      <span class="date">5</span>
      <div class="surprise">
        <h2>Oh Look - Another Pen of Mine!</h2>
        <p>A few fun modal animations for your enjoyment.</p>
        <a class="button" href="https://codepen.io/designcouch/full/obvKxm" target="_blank">View the Pen</a>
      </div>
    </div>
    <div class="day">
      <span class="date">6</span>
      <div class="surprise">
        <h2>A Stellar Podcast</h2>
        <p>If you're not familiar with Chris Coyier, shame on you. The dude is one of the founders of Codepen, for crying out loud. Anywho, he has a podcast called the Shoptalk Show that is audio gold.</p>
        <a class="button" href="http://shoptalkshow.com" target="_blank">Listen Now</a>
      </div>
    </div>
    <div class="day">
      <span class="date">7</span>
      <div class="surprise">
        <h2>An Up and Coming Designer</h2>
        <p>Dan Eden is a prodigious young brit working for Dropbox who has already contributed a large amount to the web design world. He's got a blog that's admittedly not updated often - but what's there is worth your time.
        </p>
        <a href="https://daneden.me/blog/" class="button" target="_blank">Visit DanEden.me</a>
      </div>
    </div>
    <div class="day">
      <span class="date">8</span>
      <div class="surprise">
        <h2>Swift for the Masses</h2>
        <p>For those of you familiar with Swift, Apple's new programming language, it's been an exciting few weeks. Apple, as promised open-sourced Swift, and in response, IBM introduced a cool Swift toy.</p>
        <a class="button" href="https://developer.ibm.com/swift/2015/12/03/introducing-the-ibm-swift-sandbox/">Visit the Swift Sandbox</a>
      </div>
    </div>
    <div class="day">
      <span class="date">9</span>
      <div class="surprise">
        <h2>Beautiful Progressive Loading Images</h2>
        <p>So it seems that we're all after a great solution for smoothly and progressively loaded, large images. There hasn't been a perfect solution presented yet, but this one at CSS Tricks comes close!</p>
        <a href="https://css-tricks.com/the-blur-up-technique-for-loading-background-images/" class="button">Visit CSS Tricks</a>
      </div>
    </div>
    <div class="day">
      <span class="date">10</span>
      <div class="surprise">
        <h2>A Wonderful Web Comic</h2>
        <p>Jerry King is great - and he does an awesome web comic for WebDesignerDepot every week.</p>
        <a href="http://www.webdesignerdepot.com/author/Jerry-King/" target="_blank" class="button">Visit WebDesignerDepot</a>
      </div>
    </div>
    <div class="day">
      <span class="date">11</span>
      <div class="surprise">
        <h2>CSS Animation Nirvana</h2>
        <p>While perusing another advent calendar (24ways) I stumbled across an in-progress website that is pretty epic. The guys at Rally Interactive are seriously impressive.</p>
        <a class="button" href="http://beta.rallyinteractive.com" target="_blank">Visit Their Beta Site</a>
      </div>
    </div>
  </div>
  <div id="three" class="week">
    <div class="day">
      <span class="date">12</span>
      <div class="surprise">
        <h2>Freelancers, Rejoice</h2>
        <p>One of the most integral pieces of a freelance business is your billing. I've been using Hiveage since it was called Curdbee, and love it. It's not as ubiquitous as it should be, but you should definitely check it out.</p>
        <a class="button" href="https://www.hiveage.com" target="_blank">Visit Hiveage</a>
      </div>
    </div>
    <div class="day">
      <span class="date">13</span>
      <div class="surprise">
        <h2>A Designer's CMS</h2>
        <p>While there are a slew of full-featured, easy-to-use CMS options out there, my personal preference is a lesser known one called MODX. If you take the time to get into it, you can do almost anything you want with relative ease.</p>
        <a class="button" href="http://www.modx.com" target="_blank">Visit MODX.com</a>
      </div>
    </div>
    <div class="day">
      <span class="date">14</span>
      <div class="surprise">
        <h2>A MODX Helping Hand</h2>
        <p>To aid in my CMS suggestion from yesterday, one of the best MODX resources is MODX.today. You should give it a look!</p>
        <a class="button" href="http://www.modx.com" target="_blank">Visit MODX.today</a>
      </div>
    </div>
    <div class="day">
      <span class="date">15</span>
      <div class="surprise">
        <h2>Begin at the Beginning: Part 1</h2>
        <p>Jon Duckett has a <strong>fantastic</strong> series of books on the basic technology involved in front-end web design. Here's the first.</p>
        <a class="button" href="http://www.amazon.com/gp/product/1118531647?keywords=jon%20duckett&qid=1450450861&ref_=sr_1_3&s=books&sr=1-3" target="_blank">Buy Javascript & Jquery: Interactive Front-End <br>Web Development</a>
      </div>
    </div>
    <div class="day">
      <span class="date">16</span>
      <div class="surprise">
        <h2>Begin at the Beginning: Part 2</h2>
        <p>Jon Duckett has a <strong>fantastic</strong> series of books on the basic technology involved in front-end web design. Here's the second.</p>
        <a class="button" href="http://www.amazon.com/gp/product/1118008189?keywords=jon%20duckett&qid=1450450861&ref_=sr_1_4&s=books&sr=1-4" target="_blank">Buy HTML and CSS: Design and Build Websites</a>
      </div>
    </div>
    <div class="day">
      <span class="date">17</span>
      <div class="surprise">
        <h2>Looking To Break Into UI Design?</h2>
        <p>UI-Patterns.com is a fantastic resource for learning and practicing UI design. You should really check it out, even if you don't consider yourself a dyed-in-the-wool UI designer.</p>
        <a href="http://ui-patterns.com" target="_blank" class="button">Visit UI-Designs.com</a>
      </div>
    </div>
    <div class="day">
      <span class="date">18</span>
      <div class="surprise">
        <h2>Get to Learning!</h2>
        <p>If you're just beginning in web design, I've shared a few resources already that should help you build up your fundamentals—but no resource is more effective than Treehouse. They do a fantastic job at making complex concepts easy to understand, and their wealth of  material covers much more than just web design.</p>
        <a href="https://teamtreehouse.com" target="_blank" class="button">Visit Team Treehouse</a>
      </div>
    </div>
  </div>
  <div id="four" class="week">
    <div class="day">
      <span class="date">19</span>
      <div class="surprise">
        <h2>And Now For Something Completely Random</h2>
        <p>Most of the things I'm sharing on here are related to web design, but haven't you always wondered what happened to Kevin Mccallister of Home Alone fame? Well, now we know—and it ain't good.</p>
        <a href="https://www.youtube.com/watch?v=yh7-wAy_8ss" target="_blank" class="button">Watch on YouTube</a>
      </div>
    </div>
    <div class="day">
      <span class="date">20</span>
      <div class="surprise">
        <h2>Tonight, on 60 Minutes...</h2>
        <p>You should check out the 60 Minutes segment with Charlie Rose tonight. He's peeking inside of Jony Ive's secret design studio.</p>
        <a href="https://twitter.com/60Minutes/status/677632512827506688?ref_src=twsrc%5Etfw" target="_blank" class="button">Read the Tweet</a>
      </div>
    </div>
    <div class="day">
      <span class="date">21</span>
    </div>
    <div class="day">
      <span class="date">22</span>
    </div>
    <div class="day">
      <span class="date">23</span>
    </div>
    <div class="day">
      <span class="date">24</span>
    </div>
    <div class="day" id="christmas-day">
      <span class="date">25</span>
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48.905px" height="48.904px" viewBox="0 0 48.905 48.904" style="enable-background:new 0 0 48.905 48.904;" xml:space="preserve">
        <g>
          <g>
            <g>
              <polygon points="22.092,7.262 24.452,6.022 26.811,7.262 26.362,4.635 28.268,2.775 25.633,2.39 24.452,0 23.272,2.39
				20.635,2.775 22.544,4.635 			" />
            </g>
            <g>
              <g>
                <polygon points="34.237,18.481 35.088,18.481 24.452,7.846 17.67,14.627 				" />
              </g>
              <g>
                <path d="M33.958,26.638l-1.979,0.349c0.323,0.192,0.554,0.533,0.554,0.938c0,0.61-0.496,1.104-1.106,1.104
					c-0.611,0-1.104-0.496-1.104-1.104c0-0.267,0.105-0.498,0.26-0.688l-3.443,0.611c0.85,0.074,1.523,0.762,1.523,1.631
					c0,0.916-0.742,1.656-1.655,1.656c-0.919,0-1.658-0.74-1.658-1.656c0-0.654,0.388-1.209,0.938-1.479l-4.349,0.771
					c0.299,0.151,0.51,0.457,0.51,0.813c0,0.51-0.411,0.922-0.921,0.922c-0.509,0-0.918-0.412-0.918-0.922
					c0-0.242,0.096-0.456,0.248-0.62L10.849,30.74l-2.513,2.514l27.466,2.003l-1.468-1.468h6.777L33.958,26.638z" />
              </g>
              <g>
                <path d="M16.146,25.439l-3.181,3.182l24.242-4.304l-4.406-4.404l-6.46-1.504c0.37,0.354,0.604,0.853,0.604,1.407
					c0,1.077-0.873,1.95-1.95,1.95c-1.076,0-1.946-0.873-1.946-1.95c0-0.877,0.58-1.607,1.375-1.852l-3.319-0.773
					c0.12,0.203,0.205,0.426,0.205,0.676c0,0.756-0.614,1.37-1.37,1.37c-0.754,0-1.367-0.614-1.367-1.37
					c0-0.476,0.258-0.876,0.628-1.121l-2.963-0.689l-2.425,2.425h3.715l-6.957,6.958H16.146L16.146,25.439z" />
              </g>
              <g>
                <path d="M42.468,41.925l-4.812-4.813l-4.768-0.347c0.258,0.265,0.42,0.623,0.42,1.019c0,0.81-0.654,1.465-1.462,1.465
					s-1.46-0.655-1.46-1.465c0-0.481,0.251-0.889,0.613-1.153l-8.132-0.595c0.205,0.207,0.332,0.488,0.332,0.802
					c0,0.634-0.512,1.147-1.146,1.147c-0.632,0-1.144-0.512-1.144-1.147c0-0.381,0.197-0.701,0.484-0.909l-3.998-0.294
					c0.54,0.32,0.907,0.899,0.907,1.571c0,1.011-0.82,1.828-1.832,1.828c-1.008,0-1.827-0.817-1.827-1.828
					c0-0.762,0.466-1.414,1.128-1.689l-2.73-0.199l-6.606,6.608h15.829l-1.257,6.979h6.889l-1.259-6.979L42.468,41.925
					L42.468,41.925z" />
              </g>
            </g>
          </g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
      </svg>
    </div>
 
  </div>
</section>
<div id="bottom" class="collectonme"></div>
<!-- partial -->
 
 
<div style="text-align:center">
		<footer_index>
			<audio id="player" controls autoplay preload="metadata" loop>
			  <source src="music/Pony_new2.mp3" type="audio/mp3">
			  <p>made by ton informaticien</p>
      </audio>
 
		</footer_index>
</div>
 
<!-- Start Footer -->
<footer class="footer-box">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <p class="footer-company-name">Design By : ton informaticien</p>
      </div>
    </div>
  </div>
</footer>
<!-- End Footer -->
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js'></script>
  <script  src="./script.js"></script>
 
 
 
</body>
</html>

CSS

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
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
/*------------------------------------------------------------------
    IMPORT FONTS
-------------------------------------------------------------------*/
 
 
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
 
/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/
 
@import url(animate.css);
@import url(font-awesome.min.css);
@import url(magnific-popup.css);
@import url(responsiveslides.css);
@import url(timeline.css);
@import url(flaticon.css);
 
* {
  box-sizing: border-box;
}
 
html, body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  font-weight: 200;
  height: 100%;
  min-height: 100%;
}
 
body {
  background-color: #204198;
  margin: 0 0 100px;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0 0 10px 0;
    font-weight: normal;
    line-height: 120% !important;
    color: #1f1f1f;
    margin: 0
}
h1 em {
  font-weight: 500;
}
h2 {
    font-size: 22px
}
footer_index{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
}
footer{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 30px;
  width: 100%;
}
 
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212121;
    text-decoration: none!important;
    opacity: 1
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    opacity: .8
}
.about-box{
	padding: 30px 0px;
}
 
.texteSeb{
  color : #ffffff;
  font-family: 'Lobster', cursive;
}
 
.title-box{
	text-align: center;
	margin-bottom: 30px;
}
.title-box h2 {
    font-size: 60px;
    font-family: 'Great Vibes', cursive;
    color: #e91327;
    font-weight: 400;
    padding: 0;
}
.title-box h2 span{
	color: #70c6eb;
	text-decoration: underline;
}
.about-main-info h2 span{
	color: #70c6eb;
	text-decoration: underline;
}
.about-main-info{
	margin-bottom: 30px;
}
 
.about-main-info h2 {
    font-size: 45px;
    color: #e91327;
    font-weight: 600;
}
 
figure.effect-service h2 {
    padding: 20px;
    width: 50%;
    height: 50%;
    text-align: left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
}
 
figure.effect-service h2 {
    background: #e91327;
    padding: 13px;
    width: 94%;
    height: 58px;
    border: 0;
    margin: 0;
    font-weight: 200;
    font-size: 34px;
    color: #ffffff;
    text-align: center;
    font-family: 'Great Vibes', cursive;
}
 
.left-contact h2{
	font-size: 22px;
	font-weight: 500;
	padding-bottom: 30px;
}
 
.subscribe-inner h2 {
    font-size: 80px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Great Vibes', cursive;
    padding: 0;
}
 
.about-main-info h2 img {
    margin-top: -10px;
}
 
.white_fonts p,
.white_fonts h1,
.white_fonts h2,
.white_fonts h3,
.white_fonts h4,
.white_fonts h5,
.white_fonts h6,
.white_fonts ul,
.white_fonts ul li,
.white_fonts ul li a,
.white_fonts ul i,
.white_fonts .post_info i,
.white_fonts div,
.white_fonts a.read_more {
    color: #fff !important;
}
 
#modal {
  position: fixed;
  z-index: 1;
  top: -100%;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(48, 93, 212, 0.9);
}
#modal .wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
#modal .wrapper .content {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  height: 100%;
  width: 100%;
}
#modal .wrapper .content .close {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 15px;
  right: 15px;
  transform: rotate(45deg);
}
#modal .wrapper .content .close:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -1px;
  height: 0%;
  width: 2px;
  background: rgba(255, 255, 255, 0.7);
}
#modal .wrapper .content .close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: 0%;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
}
#modal .wrapper .content .box {
  padding: 50px;
  width: 500px;
  max-width: 100%;
  background: white;
  border-radius: 5px;
  margin: 0 auto;
  transform: scale(0);
}
#modal .wrapper .content .box h2 {
  font-size: 25px;
  line-height: 35px;
  font-weight: 300;
  margin-bottom: 25px;
}
#modal .wrapper .content .box p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 25px;
}
#modal .wrapper .content .box p:last-of-type {
  margin-bottom: 0;
}
#modal .wrapper .content .box a.button {
  display: inline-block;
  padding: 15px;
  color: white;
  text-decoration: none;
  background-color: #305dd4;
  border-radius: 5px;
  margin-top: 25px;
  box-shadow: inset 0 0 0 #1b3883;
  transition: 0.25s ease-in-out;
}
#modal .wrapper .content .box a.button:hover {
  box-shadow: inset 500px 0 0 #1b3883;
}
#modal.active {
  top: 0%;
  animation: fadeIn 0.25s ease-in-out;
}
#modal.active.moveOut {
  animation: fadeOut 0.25s ease-in-out;
}
#modal.active .wrapper .content .box {
  -webkit-animation: scaleUp 750ms 0.25s linear both;
  animation: scaleUp 750ms 0.25s linear both;
}
#modal.active .wrapper .content .close:before {
  height: 100%;
  transition: 0.25s 0.5s ease-in-out;
}
#modal.active .wrapper .content .close:after {
  width: 100%;
  transition: 0.25s 0.25s ease-in-out;
}
#modal.active .wrapper .content .close:hover {
  cursor: pointer;
}
#modal.active .wrapper .content .close:hover:before, #modal.active .wrapper .content .close:hover:after {
  transition: 0.25s 0s ease-in-out;
  background: white;
}
 
#calendar {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  border-top: 1px solid #c6c6c6;
  border-left: 1px solid #c6c6c6;
  position: relative;
  z-index: 0;
}
#calendar #day-labels {
  width: 100%;
  border-bottom: 1px solid #c6c6c6;
  border-right: 1px solid #c6c6c6;
  overflow: auto;
}
#calendar #day-labels .label {
  width: 14.285714286%;
  float: left;
  text-align: right;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 1px;
  color: #7a7a7a;
  background: rgba(255, 255, 255, 0.95);
}
#calendar .week {
  width: 100%;
  overflow: hidden;
}
#calendar .week .day {
  width: 14.285714286%;
  padding-bottom: 14.285714286%;
  border-right: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  height: 0px;
  float: left;
  position: relative;
  background: rgba(255, 255, 255, 0.95);
}
#calendar .week .day .date {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  color: #7a7a7a;
}
#calendar .week .day .date.today {
  color: white;
  background: #cd1b1b;
}
#calendar .week .day .surprise {
  display: none;
}
#calendar .week .day#christmas-day {
  text-align: center;
}
#calendar .week .day#christmas-day svg {
  height: 100%;
  fill: #348834;
}
#calendar .week .day#christmas-day:hover svg {
  fill: #cfdef4;
}
#calendar .week .day.past {
  background-image: url(http://www.designcouch.com/assets/images/christmaspresent11.svg);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;
}
#calendar .week .day.past#christmas-day {
  background-image: none;
}
#calendar .week .day:first-of-type, #calendar .week .day:last-of-type {
  background-color: rgba(235, 235, 235, 0.95);
}
#calendar .week .day:first-of-type.noDate:hover, #calendar .week .day:last-of-type.noDate:hover {
  background-color: rgba(235, 235, 235, 0.95);
  cursor: default;
}
#calendar .week .day:hover {
  background-color: #305dd4;
  cursor: pointer;
}
#calendar .week .day:hover.noDate {
  background: rgba(255, 255, 255, 0.95);
  cursor: default;
}
#calendar .week .day:hover .date {
  color: #cfdef4;
}
#calendar .week .day:hover .date.today {
  background: #cfdef4;
  color: #305dd4;
}
 
#bottom {
  position: fixed !important;
  height: 0;
  width: 100%;
  bottom: 0;
  left: 0;
}
 
.footer-box {
    background: radial-gradient(#e91327,#50030b);
    padding: 0px 0;\
}
 
.footer-box .footer-company-name {
 
    text-align: center;
    margin: 0px;
    color: rgb(255 255 255 / 95%);
    font-size: 13px;
    font-weight: 400;
    padding-top: 10px;
 
}
 
.footer-box .footer-company-name a {
    color: #333;
    text-decoration: underline !important;
}
 
.footer-box .footer-company-name a:hover {
    color: #e91327;
}
 
 
@keyframes fadeIn {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes scaleUp {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.2% {
    -webkit-transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.41% {
    -webkit-transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  12.71% {
    -webkit-transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.92% {
    -webkit-transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.43% {
    -webkit-transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.46% {
    -webkit-transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  81.48% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes scaleUp {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.2% {
    -webkit-transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.41% {
    -webkit-transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  12.71% {
    -webkit-transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.92% {
    -webkit-transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.43% {
    -webkit-transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.46% {
    -webkit-transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  81.48% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

Code JavaScript :

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
// target current day, disable future days and days without dates
 
var d = new Date();
var todaysDate = d.getDate();
var target = $('#calendar .week .day .date');
 
//alert(target);
//alert("ici");
 
target.each(function(){
  var day = $(this).html();
  if (todaysDate == day) {
    $(this).addClass('today');
  }
  if (todaysDate < day){
    $(this).parent().addClass('future');
  }
  if (todaysDate >= day){
    $(this).parent().addClass('past')
  }
});
 
// handle clicks on days
 
$('.day').click(function(){
 
  var day = $(this).text();
 
  //alert(+day.match(/\d+/g).join('').substr(0,2));
 
  ClickCalendar(+day.match(/\d+/g).join('').substr(0,2));
 
  if ($(this).hasClass('future')){
    $('#modal').addClass('active');
    $('#modal .wrapper .content .box').html("<h2>Petite vilaine !</h2> <p>T'arrives beaucoup trop tôt ! Reviens ce jour-là pour voir ce que j'ai laissé pour toi</p>");
  }
  if ($(this).hasClass('past')){
    var content = $(this).children('.surprise').html();
    $('#modal').addClass('active');
    $('#modal .wrapper .content .box').html('');
    $('#modal .wrapper .content .box').html(content);
  }
})
 
// close modal
 
$('.close').click(function(){
  var ultimateParent = $(this).parent().parent().parent();
  ultimateParent.addClass('moveOut');
  setTimeout(function(){
    ultimateParent.removeClass('moveOut').removeClass('active');
  },250);
})
 
function getXhr()
{
  var xhr = null;
 
    if(window.XMLHttpRequest) // Firefox et autres
       xhr = new XMLHttpRequest();
    else if(window.ActiveXObject){ // Internet Explorer
       try {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
    }
    else { // XMLHttpRequest non support� par le navigateur
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
       xhr = false;
    }
    return xhr;
}
 
function ClickCalendar(jour) {
 
  //alert(jour);
 
  var xhr = getXhr();
  // On d�finit ce qu'on va faire quand on aura la r�ponse
  xhr.onreadystatechange = function(){
      // On ne fait quelque chose que si on a tout re�u et que le serveur est OK
      if(xhr.readyState == 4 && xhr.status == 200){
          leselect = xhr.responseText;
          // On se sert de innerHTML pour rajouter les options � la liste
          //$('#NoSeeModele').text(leselect);
      }
  }
 
  // Ici on va voir comment faire du post
  xhr.open("POST","ajaxInsertStat.php",true);
  // ne pas oublier �a pour le post
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  xhr.send("jour="+jour);
 
}
 
// snow effect customizations
 
$(document).snowfall({flakeCount : 100,collection : '.collectonme',  maxSpeed : 10});

**darkstar123456** · 06/12/2021, 17h08

Bonjour,

Vous avez écrit :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#modal .wrapper .content .box {
    width: 500px;
    max-width: 100%;
}

Alors que ça devrait être l'inverse :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#modal .wrapper .content .box {
    width: 100%;
    max-width: 500px;
 
/* Et si on souhaite garder un peu d'espace même sur mobile : */
  margin: 15px;
  width: calc(100% - 30px);
  max-width: 500px;
}

Sinon, je vois que vous mettez du display: table; et autre display: table-cell.
Je déconseille fortement l'utilisation de ces display car ils peuvent entrainer des bizarreries.
Depuis quelques années maintenant, il existe Flexbox qui permet de centrer horizontalement et verticalement des éléments et de manière beaucoup plus facile et plus propre

Voici un guide (en Anglais) sur l'utilisation de Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Voici le code testé : https://codepen.io/DarkStar123456/pen/PoJZRoP
Voici le code corrigé (uniquement les width, pas les display ^^) : https://codepen.io/DarkStar123456/pen/vYeLRYo

Popup non adaptée pour mobile

CSS

Vue hybride

Discussions similaires

Partager

Partager