How to create pop-up with direct link, not form

Develop, Build & Integrate CMS Development
21

Hi @micheleguilford and @dariakg

I create one custom module without JavaScript. Look:

1) Create one file in your Design Manager and select “Custom Module”;

2) Create 1 rich text field and 2 color fields;

3) Paste the code bellow in your space for HTML and CSS in the module.

HTML

<div id="openModal" class="modalDialog popup-auto-open">
 <div> <a href="#openModal" title="Close" class="close" style="background:{{ your_field_color.color }};color:{{ your_field_color_2.color }};">X</a>
 Here you insert your value of rich text field or image field
 </div>
</div>

CSS

.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.8);
 z-index: 99999;
 opacity: 1;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 pointer-events: auto;
}

.modalDialog:target {
 opacity: 0;
 pointer-events: none;
}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}

.close {
 background: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 padding:2px;
 border-radius:100%;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}

.close:hover {
 box-shadow: 0 0 5px #333333;
 padding: 5px;
 border-radius: 100%;
 transition: 0.1s linear all;
}

.popup-auto-open img{
 max-width:100%;
}

4) Is important replace where I left pink with the value of the fields you created.

Obs: u can use the above codes in your site code, dont need create custom module. But if use HubSpot, is bether one module to inser in templates os sites and blogs and easy customization.

Did this post help solve your problem? If so, please mark it as a solution.

Best Regasrds! :slightly_smiling_face: