Rich-text Reply

Adding a modal (edit code and experiment vanishes)

sam132 03-20-17

Adding a modal (edit code and experiment vanishes)

[ Edited ]

Afternoon all,

 

I'm trying to follow this guide to add a modal to my page.

 

Essentially I created the following HTML:

 

 

<div id="overlay"></div>
<div id="lightbox" class="dialog">
<div class="closer"></div>
<div class="content panes">
<div class="pane" style="display: block;">

 <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60%
    </div>
	<small><p>You're almost there! Complete the form and click the button for instant access.</p></small>
	<hr>
	<h3>Enter Your Details To Instantly Access 30 Days Of Our Fully Functioning CRM.</h3>
	
	<input type="submit" class="startfreetrial pointer" value="Start Your Free Trial" style="top: -45px;">
	
	<small><p style="color: black;">We will never sell your personal information. See our <a href="/privacy-policy" target="_blank">Privacy Policy</a>.</p></small>
	</div>
	</div>
	</div>
	</div>

 

 

Applied this CSS:

 

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%
background-color: #000;
filter:alpha(opactiy=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opactiy: 0.5;
z-index: 1000;
}

#lightbox {
position: fixed;
top: 20%;
left: 50%;
width: 850px;
height: auto;
background: #fff;
box-shadow: 0 2px 10px #333;
margin-left: -425px;
z-index: 1001;
}

 

 

And finally this code:

 

 

	$("body").append("<div id=\"overlay\"></div>\n<div id=\"lightbox\" class=\"dialog\">\n\t<div class=\"closer\"></div>\n\t<div 
	class=\"content panes\">\n\t\t<div class=\"pane\" style=\"display: block;\">\n\t\t\t<div class=\"header\">\n\t\t\t\t<h1>Sample 
	Lightbox</h1>\n\t\t\t</div>\n\t\t\t<div class=\"content-body\" style=\"max-height: 634px;\">\n <center><img
	src\"//cdn.optimizely.com/img/69234495/c5026e72bbf84890994b2323633061ad.png\">
	</center>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>");
	$("div.closer").bind("click", function(){document.getElementById("overlay").style.display="none";
	document.getElementById("lightbox").style.display="none"});

 

But when I enter the code I get a pop-up error message which states: '

app.optimizely.com says:

Error evaluating variation javascript&colon;
SyntaxError: Invalid or unexpected token (line 54, col 13871)'

 

What's going on here? Anyway to fix this?

 

Many thanks,

 

Sam

Always looking to connect with optimisation experts, connect at: https://uk.linkedin.com/in/samueljefferies
Level 2

pbs 03-21-17
 

Re: Adding a modal (edit code and experiment vanishes)

Hi Sam,

 

I believe the error you're getting is due to a missing semicolon on the end of your last statement of your JavaScript code: 

document.getElementById("lightbox").style.display="none";

 

However, there are also other problems with your implementation. In the last code box, the first line adds the Optimizely sample lightbox from the blog post. So this overwrites your own lightbox.

 

What you should do is erase your <edit code> content and add your lightbox code (from your first code box) to your page using the Edit HTML of an element on your page.

 

Then, add your CSS code to the Experiment CSS (you are missing a semicolon in line 6 and a typo in "opacity").

 

Finally, add the following jQuery to the rest of the <edit code>:

$( "div#lightbox" ).click(function() {
 document.getElementById("overlay").style.display="none";
 document.getElementById("lightbox").style.display="none";
});

This should set you off. 

 

Patricia

If this answer solved your issue, please accept as a solution.
pbs
Optimizely
sam132 03-28-17
 

Re: Adding a modal (edit code and experiment vanishes)

Thanks Patricia,

That's great, just to confirm what do you mean by:

"What you should do is erase your <edit code> content and add your lightbox code (from your first code box) to your page using the Edit HTML of an element on your page."

Many thanks,

Sam
Always looking to connect with optimisation experts, connect at: https://uk.linkedin.com/in/samueljefferies
Level 2
pbs 03-29-17
 

Re: Adding a modal (edit code and experiment vanishes)

[ Edited ]

Hi @sam132,

 

There are multiple ways to add your lightbox to your page. To do this using the Visual Editor: 

  1. Clear any lightbox html code from your experiment. 
  2. In the Editor, select the element you would like to add the lightbox to
  3. Click Insert HTML 
  4. Paste the html of the lightbox   

 

Proceed with the remaining steps (CSS and jQuery that makes the Lightbox interactive, which has to come after the above code) 

 

If this answer solved your issue, please accept as a solution.
pbs
Optimizely