{"id":24957,"date":"2024-08-30T22:02:03","date_gmt":"2024-08-30T20:02:03","guid":{"rendered":"https:\/\/bookingtjeneste.no\/?page_id=24957"},"modified":"2026-06-02T12:08:53","modified_gmt":"2026-06-02T10:08:53","slug":"demo-popup-modal","status":"publish","type":"page","link":"https:\/\/bookingtjeneste.no\/nn\/demo-popup-modal\/","title":{"rendered":"Demo popup modal"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"24957\" class=\"elementor elementor-24957\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b650865 e-flex e-con-boxed e-con e-parent\" data-id=\"b650865\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcc5948 elementor-widget elementor-widget-html\" data-id=\"fcc5948\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Booking pop-up -->\n<button type=\"button\" class=\"bkntc-booknow-btn\" onclick=\"bkntcOpenBooking()\">Booking<\/button>\n<style>\n  .bkntc-booknow-btn{background-color:#333331;color:#fff;font-size:18px;font-weight:400;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}\n  .bkntc-booknow-btn:hover{background-color:#4120EA}\n  .bkntc-modal-overlay{position:fixed;inset:0;z-index:10000;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.7)}\n  \/* Dialog = the VISIBLE panel size. The iframe inside is a little wider so Booknetic *\/\n  \/* keeps the steps sidebar; .bkntc-modal-crop hides the extra body + the panel shadow. *\/\n  .bkntc-modal-dialog{position:relative;width:980px;height:700px;max-width:100%;max-height:100%}\n  .bkntc-modal-crop{width:100%;height:700px;overflow:hidden;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.35)}\n  .bkntc-modal-frame{display:block;width:1001px;height:900px;border:none;background:#fff}\n  .bkntc-modal-close{position:absolute;top:-14px;right:-14px;z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#fff;color:#333;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}\n  .bkntc-modal-close:hover{background:#f0f0f0}\n  \/* Mobile\/tablet: fill the whole screen, with a clear close button in the corner. *\/\n  @media (max-width:1079px){\n    .bkntc-modal-overlay{padding:0}\n    .bkntc-modal-dialog{width:100%;height:100%;max-width:100%;max-height:100%}\n    .bkntc-modal-crop{height:100%;border-radius:0;box-shadow:none}\n    .bkntc-modal-frame{width:100%;height:100%}\n    .bkntc-modal-close{top:12px;right:12px;width:42px;height:42px;font-size:26px;background:rgba(17,17,17,.85);color:#fff}\n  }\n<\/style>\n<script>\nfunction bkntcOpenBooking(){\n  if(document.getElementById('bkntcBookingModal'))return;\n\n  var prevHtmlOverflow=document.documentElement.style.overflow;\n  var prevBodyOverflow=document.body.style.overflow;\n\n  var overlay=document.createElement('div');\n  overlay.id='bkntcBookingModal';\n  overlay.className='bkntc-modal-overlay';\n  overlay.setAttribute('role','dialog');\n  overlay.setAttribute('aria-modal','true');\n\n  var dialog=document.createElement('div');\n  dialog.className='bkntc-modal-dialog';\n\n  var crop=document.createElement('div');\n  crop.className='bkntc-modal-crop';\n\n  var iframe=document.createElement('iframe');\n  iframe.className='bkntc-modal-frame';\n  iframe.title='Online booking';\n  iframe.src=\"https:\/\/bookingtjeneste.no\/Demo?iframe=1\";\n  crop.appendChild(iframe);\n  dialog.appendChild(crop);\n\n  var closeBtn=document.createElement('button');\n  closeBtn.type='button';\n  closeBtn.className='bkntc-modal-close';\n  closeBtn.setAttribute('aria-label','Close');\n  closeBtn.textContent='\u00d7';\n  dialog.appendChild(closeBtn);\n\n  overlay.appendChild(dialog);\n\n  function closeModal(){\n    overlay.remove();\n    document.documentElement.style.overflow=prevHtmlOverflow;\n    document.body.style.overflow=prevBodyOverflow;\n    document.removeEventListener('keydown',onKey);\n  }\n  function onKey(e){if(e.key==='Escape')closeModal();}\n\n  closeBtn.addEventListener('click',closeModal);\n  document.addEventListener('keydown',onKey);\n\n  document.documentElement.style.overflow='hidden';\n  document.body.style.overflow='hidden';\n  document.body.appendChild(overlay);\n}\n<\/script>\n<!-- \/Booking pop-up -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Booking<\/p>","protected":false},"author":1,"featured_media":24547,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-24957","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/pages\/24957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/comments?post=24957"}],"version-history":[{"count":6,"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/pages\/24957\/revisions"}],"predecessor-version":[{"id":28879,"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/pages\/24957\/revisions\/28879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/media\/24547"}],"wp:attachment":[{"href":"https:\/\/bookingtjeneste.no\/nn\/wp-json\/wp\/v2\/media?parent=24957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}