{"id":1193,"date":"2022-05-12T11:19:11","date_gmt":"2022-05-12T04:19:11","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=1193"},"modified":"2022-09-11T14:00:38","modified_gmt":"2022-09-11T07:00:38","slug":"membuat-simple-popup-dengan-html-dan-jquery-tanpa-database","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/make-simple-popup-with-html-and-jquery-without-database\/","title":{"rendered":"Make simple popup with html and jquery without database"},"content":{"rendered":"For friends who are looking for a simple script for a simple popup with html and jquery only without other javascript libraries \/ plugins, here’s the link sample filenya<\/a>.\r\n\r\n\"popup<\/a>\r\n\r\n\r\n\r\n
<html>\r\n  <head>\r\n    <title>Simple popup using jquery<\/title>\r\n\r\n    <style type=\"text\/css\">\r\n      \/* popup window *\/\r\n\r\n      #popup_window {\r\n        padding: 10px;\r\n        background: #267e8a;\r\n        cursor: pointer;\r\n        color: #fcfcfc;\r\n      }\r\n      .popup-overlay {\r\n        width: 100%;\r\n        height: 100%;\r\n        position: fixed;\r\n        background: rgba(196, 196, 196, 0.85);\r\n        top: 0;\r\n        left: 100%;\r\n        opacity: 0;\r\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n        -webkit-transition: opacity 0.2s ease-out;\r\n        -moz-transition: opacity 0.2s ease-out;\r\n        -ms-transition: opacity 0.2s ease-out;\r\n        -o-transition: opacity 0.2s ease-out;\r\n        transition: opacity 0.2s ease-out;\r\n      }\r\n      .overlay .popup-overlay {\r\n        opacity: 1;\r\n        left: 0;\r\n      }\r\n      .popup {\r\n        position: fixed;\r\n        top: 5%;\r\n        left: 50%;\r\n        z-index: -9999;\r\n      }\r\n      .popup .popup-body {\r\n        background: #ffffff;\r\n        background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);\r\n        background: -webkit-gradient(\r\n          linear,\r\n          left top,\r\n          left bottom,\r\n          color-stop(0%, #ffffff),\r\n          color-stop(100%, #f7f7f7)\r\n        );\r\n        background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);\r\n        background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);\r\n        background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);\r\n        background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);\r\n        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);\r\n        opacity: 0;\r\n        min-height: 150px;\r\n        width: 800px;\r\n        margin-left: -400px;\r\n        padding: 20px;\r\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n        -webkit-transition: opacity 0.2s ease-out;\r\n        -moz-transition: opacity 0.2s ease-out;\r\n        -ms-transition: opacity 0.2s ease-out;\r\n        -o-transition: opacity 0.2s ease-out;\r\n        transition: opacity 0.2s ease-out;\r\n        position: relative;\r\n        -moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);\r\n        -webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);\r\n        box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);\r\n        border: 1px solid #e9e9e9;\r\n      }\r\n\r\n      .popup .popup-body {\r\n        width: 90% !important;\r\n        height: 80% !important;\r\n      }\r\n\r\n      .popup.visible,\r\n      .popup.transitioning {\r\n        z-index: 9999;\r\n      }\r\n      .popup.visible .popup-body {\r\n        opacity: 1;\r\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n      }\r\n      .popup .popup-exit {\r\n        cursor: pointer;\r\n        display: block;\r\n        width: 24px;\r\n        height: 24px;\r\n        position: absolute;\r\n        top: 150px;\r\n        right: 195px;\r\n        background: url(\"images\/quit.png\") no-repeat;\r\n      }\r\n      .popup .popup-content {\r\n        overflow: scroll;\r\n        height: 650px;\r\n      }\r\n      .popup-content .popup-title {\r\n        font-size: 24px;\r\n        border-bottom: 1px solid #e9e9e9;\r\n        padding-bottom: 10px;\r\n      }\r\n      .popup-content p {\r\n        font-size: 13px;\r\n        text-align: justify;\r\n      }\r\n\r\n      \/* popup window *\/\r\n    <\/style>\r\n    <script src=\"js\/jquery.min.js\" type=\"text\/javascript\"><\/script>\r\n    <script type=\"text\/javascript\">\r\n      \/\/ You can place JavaScript like this\r\n      \/\/<![CDATA[\r\n      $(window).load(function () {\r\n        $(document).ready(function ($) {\r\n          $(\"[data-popup-target]\").click(function () {\r\n            $(\"html\").addClass(\"overlay\");\r\n            var activePopup = $(this).attr(\"data-popup-target\");\r\n            $(activePopup).addClass(\"visible\");\r\n          });\r\n\r\n          $(document).keyup(function (e) {\r\n            if (e.keyCode == 27 && $(\"html\").hasClass(\"overlay\")) {\r\n              clearPopup();\r\n            }\r\n          });\r\n\r\n          $(\".popup-exit\").click(function () {\r\n            clearPopup();\r\n          });\r\n\r\n          $(\".popup-overlay\").click(function () {\r\n            clearPopup();\r\n          });\r\n\r\n          function clearPopup() {\r\n            $(\".popup.visible\")\r\n              .addClass(\"transitioning\")\r\n              .removeClass(\"visible\");\r\n            $(\"html\").removeClass(\"overlay\");\r\n\r\n            setTimeout(function () {\r\n              $(\".popup\").removeClass(\"transitioning\");\r\n            }, 200);\r\n          }\r\n        });\r\n      });\r\n    <\/script>\r\n  <\/head>\r\n  <body>\r\n    <a style=\"cursor: pointer\" data-popup-target=\"#popup1\"\r\n      >Click to show popup<\/a\r\n    >\r\n\r\n    <div id=\"popup1\" class=\"popup\">\r\n      <div class=\"popup-body\">\r\n        <div class=\"popup-content\">\r\n          <h1>Popup Title<\/h1>\r\n          Lorem ipsum dolor sit amet, sea decore appetere te. Pro cu idque\r\n          lucilius, eu sint ludus pri. Pro unum lucilius nominati eu, in mea\r\n          iusto periculis. At utamur sadipscing necessitatibus cum. Libris\r\n          ancillae sed ex, ullum erant forensibus vim at, vel libris putant\r\n          ei.<br \/>\r\n\r\n          Mei ut posse persius salutatus, duo decore dignissim et. Cibo blandit\r\n          abhorreant et mel, quando animal facilis cu nam, pri mucius verear\r\n          oportere in. Cu vel oportere voluptatibus. Mel graeco expetenda ei,\r\n          alii dicat invenire duo in.<br \/>\r\n\r\n          Augue menandri an eam. Ea eam suscipit consulatu. Est id primis\r\n          explicari imperdiet, ut purto tacimates cotidieque nec. In nonumy\r\n          adipiscing quaerendum usu. Ea nam etiam salutatus, mazim saperet qui\r\n          ne.<br \/>\r\n\r\n          Duo at impetus labitur, his vero nullam animal cu. Liber ignota\r\n          utroque in mei, prima detraxit dissentias cum ut. An mei utamur latine\r\n          abhorreant. Possim convenire inciderint per no, nec et liber virtute.\r\n          Liber primis abhorreant ea mel.<br \/>\r\n\r\n          Vitae omnesque ullamcorper has an, sea eruditi albucius dignissim an.\r\n          At posse liber clita vim, vidisse albucius pri ad. Ad his labore\r\n          eloquentiam. Senserit scribentur eloquentiam pri in, ei vim dolor\r\n          affert. Ei porro electram usu, qui quot justo partiendo in, ei\r\n          volutpat scripserit mea. Et verterem praesent ius, clita dictas pri\r\n          ad.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"popup-overlay\">&nbsp;<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"
For friends who are looking for a simple script for a simple popup with html and jquery only without other javascript libraries \/ plugins, here’s the link sample filenya. <html> <head> <title>Simple popup using...<\/p>\n","protected":false},"author":1,"featured_media":1194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=1193"}],"version-history":[{"count":0,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/1194"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=1193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=1193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=1193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}