{"id":828,"date":"2020-07-12T21:36:46","date_gmt":"2020-07-13T00:36:46","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=828"},"modified":"2022-12-09T08:21:11","modified_gmt":"2022-12-09T11:21:11","slug":"como-criar-um-modal-ou-um-popup-centralizado-na-tela-com-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/como-criar-um-modal-ou-um-popup-centralizado-na-tela-com-css\/","title":{"rendered":"Como criar um modal, ou um popup centralizado na tela com css"},"content":{"rendered":"

Veja abaixo como \u00e9 simples de Como criar um modal, ou um popup centralizado na tela com css<\/p>\n

 <\/p>\n

\"como

como criar um modal ou div centralizado<\/p><\/div>\n

Ap\u00f3s configurar, vai ficar como exemplo acima.<\/p>\n

<!DOCTYPE html>\r\n<head>\r\n    <title>Creating a modal window with HTML5 &amp; CSS3<\/title>\r\n    \r\n    <style>\r\n    .modalDialog {\r\n        position: fixed;\r\n        font-family: Arial, Helvetica, sans-serif;\r\n        top: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        background: rgba(0,0,0,0.8);\r\n        z-index: 99999;\r\n        opacity:0;\r\n        -webkit-transition: opacity 400ms ease-in;\r\n        -moz-transition: opacity 400ms ease-in;\r\n        transition: opacity 400ms ease-in;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .modalDialog:target {\r\n        opacity:1;\r\n        pointer-events: auto;\r\n    }\r\n\r\n    .modalDialog > div {\r\n        width: 80%;\r\n        position: relative;\r\n        margin: 10% auto;\r\n        padding: 5px 20px 13px 20px;\r\n        border-radius: 10px;\r\n        background: #fff;\r\n        background: -moz-linear-gradient(#fff, #999);\r\n        background: -webkit-linear-gradient(#fff, #999);\r\n        background: -o-linear-gradient(#fff, #999);\r\n    }\r\n\r\n    .close {\r\n        background: #606061;\r\n        color: #FFFFFF;\r\n        line-height: 25px;\r\n        position: absolute;\r\n        right: -12px;\r\n        text-align: center;\r\n        top: -10px;\r\n        width: 24px;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n        -webkit-border-radius: 12px;\r\n        -moz-border-radius: 12px;\r\n        border-radius: 12px;\r\n        -moz-box-shadow: 1px 1px 3px #000;\r\n        -webkit-box-shadow: 1px 1px 3px #000;\r\n        box-shadow: 1px 1px 3px #000;\r\n    }\r\n\r\n    .close:hover { background: #00d9ff; }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<a href=\"#openModal\">Open Modal<\/a>\r\n\r\n<div id=\"openModal\" class=\"modalDialog\">\r\n    <div>\r\n        <a href=\"#close\" title=\"Close\" class=\"close\">X<\/a>\r\n        <h2>Modal Box<\/h2>\r\n        <p>This is a sample modal box that can be created using the powers of CSS3.<\/p>\r\n        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login\/register form for users.<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n