{"id":2261,"date":"2019-10-26T16:57:52","date_gmt":"2019-10-26T15:57:52","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=2261"},"modified":"2022-02-17T07:14:46","modified_gmt":"2022-02-17T07:14:46","slug":"simple-pop-up-box-with-changeable-content","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/examples-javascript\/popup-box\/simple-pop-up-box-with-changeable-content","title":{"rendered":"Simple pop up box with changeable content"},"content":{"rendered":"\n
Add to top of HTML< after <body> tag – Normal<\/h5>\n\n\n\n
  <!---------------------->\n  <!----- POP UP BOX ----->\n  <!---------------------->\n  <div class=\"popup_box1_container\">\n      <span class=\"popup_box1_aligner\"><\/span>\n      <div>\n          <div class=\"popup_box1_close_button\">X<\/div>\n          <div id=\"popup_box1_content\"><\/div>\n      <\/div>\n  <\/div>\n  <script>\n    $(window).load(function () {\n        $('.popup_box1_container').click(function(){\n            $('.popup_box1_container').hide();\n        });\n        $('.popup_box1_close_button').click(function(){\n            $('.popup_box1_container').hide();\n        });\n    });\n    function popup_box1_show() {\n       $('.popup_box1_container').show();\n    }\n<\/script><\/code><\/pre>\n\n\n\n
Add to top of HTML< after <body> tag – WordPress<\/h5>\n\n\n\n
(Same but needs the ‘$’ changed to ‘jQuery’ or you get “TypeError: $ is not a function” console errors)<\/p>\n\n\n\n
    <!---------------------->\n    <!----- POP UP BOX ----->\n    <!---------------------->\n    <div class=\"popup_box1_container\">\n        <span class=\"popup_box1_aligner\"><\/span>\n        <div>\n            <div class=\"popup_box1_close_button\">X<\/div>\n            <div id=\"popup_box1_content\"><\/div>\n        <\/div>\n    <\/div>\n    <script>\n      jQuery(window).load(function () {\n          jQuery('.popup_box1_container').click(function(){\n              jQuery('.popup_box1_container').hide();\n          });\n          jQuery('.popup_box1_close_button').click(function(){\n              jQuery('.popup_box1_container').hide();\n          });\n      });\n      function popup_box1_show() {\n         jQuery('.popup_box1_container').show();\n      }\n  <\/script><\/code><\/pre>\n\n\n\n
Links that will trigger a popup<\/h5>\n\n\n\n
  <a class=\"popup_box1_trigger\" onclick=\"document.getElementById('popup_box1_content').innerHTML='<p>My popup<br>box<\/p>'; popup_box1_show();\" >Show popup1<\/a><br>\n  <a class=\"popup_box1_trigger\" onclick=\"document.getElementById('popup_box1_content').innerHTML='<p>My other popup<\/p>'; popup_box1_show();\" >Show popup2<\/a><br><\/code><\/pre>\n\n\n\n
CSS<\/h4>\n\n\n\n
\n\/*----------------------*\/\n\/*----------------------*\/\n\/*----- POP UP BOX -----*\/\n\/*----------------------*\/\n\/*----------------------*\/\n.popup_box1_container{\n  background:rgba(0,0,0,0.4);\n  cursor:pointer;\n  display:none;\n  height:100%;\n  position:fixed;\n  text-align:center;\n  top:0;\n  width:100%;\n  z-index:10000;\n}\n.popup_box1_container .popup_box1_aligner{\n  display:inline-block;\n  height:100%;\n  vertical-align:middle;\n}\n.popup_box1_container > div {\n  background-color: #fff;\n  border: 2px solid #999;\n  border-radius: 8px;\n  box-shadow: 10px 10px 60px #555;\n  display: inline-block;\n  height: auto;\n  max-width: 551px;\n  min-height: 100px;\n  vertical-align: middle;\n  width: 80%;\n  position: relative;\n  padding: 15px 5%;\n}\n.popup_box1_close_button {\n  background-color: #fff;\n  border: 3px solid #999;\n  border-radius: 50px;\n  cursor: pointer;\n  display: inline-block;\n  font-family: arial;\n  font-weight: bold;\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  font-size: 20px;\n  line-height: 26px;\n  color: #444;\n  width: 30px;\n  height: 30px;\n  text-align: center;\n}\n.popup_box1_close_button:hover {\n  background-color: #ccc;\n}\n.popup_box1_trigger {\n  cursor: pointer;\n  font-weight: bold;\n}<\/code><\/pre>\n\n\n\n
Issues<\/h4>\n\n\n\n
You can’t include a single quote in your popup text, or the html code versions of it!  Instead use a backslash to escape it like this: \\’<\/p>\n","protected":false},"excerpt":{"rendered":"
Add to top of HTML< after <body> tag – Normal Add to top of HTML< after <body> tag – WordPress (Same but needs the ‘$’ changed to ‘jQuery’ or you get “TypeError: $ is not a function” console errors) Links that will trigger a popup CSS Issues You can’t include a single quote in your […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[188],"tags":[],"class_list":["post-2261","post","type-post","status-publish","format-standard","hentry","category-popup-box"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=2261"}],"version-history":[{"count":5,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2261\/revisions"}],"predecessor-version":[{"id":2351,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2261\/revisions\/2351"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=2261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=2261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=2261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}