\n$('body').append('<div id="mask"><\/div>');\n \n\/\/On r\u00e9cup\u00e8re les dimensions de l'\u00e9cran\nvar maskHeight = $(document).height();\nvar maskWidth = $(window).width();\n \n\/\/R\u00e8gle les dimension du masque afin de remplir tout l'\u00e9cran\n$('#mask').css({'width':maskWidth,'height':maskHeight});\n \n\/\/Effet de transition \n$('#mask').fadeIn(1000); \n$('#mask').fadeTo("slow",0.8);\n \n$('body').append('<div id="modal">Bonjour, je suis une fen\u00eatre modale. Cliquez sur le masque pour me refermer.<\/div>');\n \n\/\/R\u00e9cup\u00e8re les dimensions de la fen\u00eatre du navigateur\nvar winWidth = $(window).width();\nvar winHeight = $(window).height();\n \n\/\/R\u00e9cup\u00e8re les dimensions de la fen\u00eatre modale\nvar mWidth = $('#modal').width();\nvar mHeight = $('#modal').height();\n \n\/\/Positionne la fen\u00eatre modale au milieu de la fen\u00eatre du navigateur\nvar mTop = winHeight\/2 - mHeight\/2;\nvar mLeft = winWidth\/2 - mWidth\/2;\n \n$('#modal').css({'top': mTop, 'left': mLeft});\n \n$('#mask').click(function(){\n $('#modal').remove();\n $('#mask').remove();\n});\n<\/pre><\/div>\n\n\nEt voil\u00e0 ! J’esp\u00e8re vous avoir \u00e9t\u00e9 encore utile, et vous dit \u00e0 bient\u00f4t pour de nouvelles aventures codesques !<\/p>\n","protected":false},"excerpt":{"rendered":"
Bonjour \u00e0 tous, aujourd’hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu’est-ce que c’est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[],"class_list":["post-171","post","type-post","status-publish","format-standard","hentry","category-jquery"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-2L","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1096,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/03\/fenetre-modale-javascript-natif\/","url_meta":{"origin":171,"position":0},"title":"Une fen\u00eatre modale en JavaScript natif","author":"geekc","date":"03\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery. Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise