Blog

Make a new partial

1. Click on “Advanced Editor”

2. Click on “Partials”

3. Make a new partial called “pop-up.htm”

Paste the below code into the partial file

Click Save

CSS CODE

Paste the below code into Assets -> client -> css -> custom.css at the top (more steps after)

/*---------------Pop up css------------*/
#css-only-modals{position:fixed;pointer-events:none;left:0;top:0;right:0;bottom:0;z-index:10000000;text-align:center;white-space:nowrap;height:100%}#css-only-modals:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em}.css-only-modal-check{pointer-events:auto;display:none}.css-only-modal-check:checked~.css-only-modal{opacity:1;pointer-events:auto}.css-only-modal{width:700px;background:#fff;z-index:1;display:inline-block;position:relative;pointer-events:auto;padding:25px;text-align:right;border-radius:4px;white-space:normal;display:inline-block;vertical-align:middle;opacity:0;pointer-events:none;max-width:90%}.css-only-modal h2{text-align:center}.css-only-modal p{text-align:left}.btn-primary:hover{color:#fff;background-color:#999;border-color:#999}.btn-primary{color:#fff;background-color:#777;border-color:#777;border-radius:4px;padding:6px 12px}.css-only-modal-check:checked~#screen-shade{opacity:.5;pointer-events:auto}#modal1{display:none}#screen-shade{opacity:0;background:#000;position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;transition:opacity .8s}
/*------------End pop up css------*/

Add the partial to the home layout

• Click on Layouts -> custom-home.htm

  • IF custom-home.htm doesn’t exist, click on home and click “Create custom override” under home.htm in the orange bar

  • IF you can’t see “Create custom override” close custom.css and home.htm, and reopen home.htm, it should then appear.

• Paste the below code to the bottom of the file and click save.

{% partial 'pop-up' %}

Add the content to the pop-up

When you reload the normal editor, the pop up will appear, you can now click on it and edit it like any editable component.

How to remove the pop-up

• Go into the custom-home layout

• Delete the pop up partial from the custom home layout and click save.