{"id":89,"date":"2021-06-29T10:18:14","date_gmt":"2021-06-29T01:18:14","guid":{"rendered":"https:\/\/javascript.auctionpro.co.kr\/?page_id=89"},"modified":"2021-06-29T10:20:19","modified_gmt":"2021-06-29T01:20:19","slug":"material-modal-examples","status":"publish","type":"page","link":"https:\/\/javascript.auctionpro.co.kr\/?page_id=89","title":{"rendered":"material-modal Examples"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t\t<style>\n\t\t\t#materialModal{\n\t\t\t\tfont-family:roboto;\n\t\t\t\tcolor:#222;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0px;\n\t\t\t\tleft:0px;\n\t\t\t\twidth:100%;\n\t\t\t\theight:100%;\n\t\t\t\tbackground:rgba(0,0,0,0.5);\n\t\t\t\tdisplay:table;\n\t\t\t\tz-index:1000;\n\t\t\t}\n\t\t\t#materialModalCentered{\n\t\t\t\tdisplay:table-cell;\n\t\t\t\tvertical-align:middle;\n\t\t\t}\n\t\t\t#materialModalContent{\n\t\t\t\tpadding:10px;\n\t\t\t\tposition:relative;\n\t\t\t\tbackground:white;\n\t\t\t\twidth:400px;\n\t\t\t\tmin-height:200px;\n\t\t\t\tmargin:auto;\n\t\t\t\tbox-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);\n\t\t\t\tbox-sizing:border-box;\n\t\t\t}\n\t\t\t#materialModalTitle{\n\t\t\t\tmargin:10px;\n\t\t\t\tfont-weight:bold;\n\t\t\t\tfont-size:1.2em;\n\t\t\t}\n\t\t\t#materialModalText{\n\t\t\t\tmargin:10px;\n\t\t\t\tmargin-bottom:40px;\n\t\t\t}\n\t\t\t#materialModalButtons{\n\t\t\t\twidth:calc(100% - 20px);\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0px;\n\t\t\t}\n\t\t\t.materialModalButton{\n\t\t\t\tmargin:10px;\n\t\t\t\tfont-weight:bold;\n\t\t\t\tcursor:pointer;\n\t\t\t\ttext-align:center;\n\t\t\t\tfloat:right;\n\t\t\t\ttext-transform:uppercase;\n\t\t\t\tpadding:10px;\n\t\t\t}\n\t\t\t#materialModal.hide{\n\t\t\t\topacity:0;\n\t\t\t\ttransition:opacity 0.2s ease-out;\n\t\t\t\tpointer-events:none;\n\t\t\t}\n\t\t\t#materialModal.hide #materialModalCentered{\n\t\t\t\ttransform:scale(0);\n\t\t\t\ttransition:transform 0.2s ease-out;\n\t\t\t}\n\t\t\t#materialModal.show{\n\t\t\t\topacity:1;\n\t\t\t\ttransition:opacity 0.2s ease-in;\n\t\t\t}\n\t\t\t#materialModal.show #materialModalCentered{\n\t\t\t\ttransform:scale(1);\n\t\t\t\ttransition:transform 0.2s ease-in;\n\t\t\t}\n\t\t<\/style>\n\t\t<script>\n\t\t\tmaterialCallback = null;\n\t\t\tfunction materialAlert( title, text, callback ){\n\t\t\t\tdocument.getElementById('materialModalTitle').innerHTML = title;\n\t\t\t\tdocument.getElementById('materialModalText').innerHTML = text;\n\t\t\t\tdocument.getElementById('materialModalButtonCANCEL').style.display = 'none';\n\t\t\t\tdocument.getElementById('materialModal').className = 'show';\n\t\t\t\tmaterialCallback = callback;\n\t\t\t}\n\t\t\tfunction materialConfirm( title, text, callback ){\n\t\t\t\tmaterialAlert( title, text, callback );\n\t\t\t\tdocument.getElementById('materialModalButtonCANCEL').style.display = 'block';\n\t\t\t}\n\t\t\tfunction closeMaterialAlert(e, result){\n\t\t\t\te.stopPropagation();\n\t\t\t\tdocument.getElementById('materialModal').className = 'hide';\n\t\t\t\tif(typeof materialCallback == 'function') materialCallback(result);\n\t\t\t}\n\t\t<\/script>\n    <title>material-modal Examples<\/title>\n\t<\/head>\n\t<body>\n    \n\t<h1>material-modal Examples<\/h1>\n      \t\t\n\t\t<div id=\"materialModal\" onclick=\"closeMaterialAlert(event, false)\" class=\"hide\">\n\t\t\t<div id=\"materialModalCentered\">\n\t\t\t\t<div id=\"materialModalContent\" onclick=\"event.stopPropagation()\">\n\t\t\t\t\t\n\t\t\t\t\t<div id=\"materialModalTitle\">\n\t\t\t\t\t\tThis is the title\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t<div id=\"materialModalText\">\n\t\t\t\t\t\tThis is the content<br\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t<div id=\"materialModalButtons\">\n\t\t\t\t\t<div id=\"materialModalButtonOK\" class=\"materialModalButton\" onclick=\"closeMaterialAlert(event, true)\">\n\t\t\t\t\t\t\ud655 \uc778 \n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div id=\"materialModalButtonCANCEL\" class=\"materialModalButton\" onclick=\"closeMaterialAlert(event, false)\">\n\t\t\t\t\t\t\ucde8 \uc18c \n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<button onclick=\"materialConfirm('','[\ud734\ub300\ud3f0]02222222222<br\/>[\uc774\uba54\uc77c]dhdhdhdk@Dfdfdf.co.kr<br\/>[\ud0d1\uc2b9\uac1d]\uc758 \uc774\ub984,\uc131\ubcc4\uacfc \uc0dd\ub144\uc6d4\uc77c\uc744 \uc815\ud655\ud788 \uc785\ub825\ud558\uc168\ub294\uc9c0 \ud655\uc778 \ud574 \uc8fc\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<br\/> \uc608\uc57d\ud655\uc778 \ud6c4 \ubcc0\uacbd \ubd88\uac00.',function(result){console.log(result)})\">Show confirm<\/button>\n\t\t\n\t<\/body>\n<\/html><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":2,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}