Frontrow JS Modal Library Demos

Customizable modals for the humanity. No jQuery required and no dependencies.

Launch a basic modal


frontrow('basic');
<button class="btn" id="basic">Launch</button> 

Set a title?


frontrow('theatre', {title: "To the theatre!"});
<button class="btn" id="theatre">Launch</button> 

Your modal, your content


frontrow('beach', {
  title: "To the beach!", 
  content: "#content", 
  width: "auto"
});
<button class="btn" id="beach">Launch</button> 
<div id="content" style="display: none;"> <div> <h4>By the sea</h4> <img src="the_beach.jpg"> <div> <div>

Let's change the overlay color!


frontrow('cinema', {title: "To the cinema!", overlayColor: "#bada55"});
<button class="btn" id="cinema">Launch</button> 

Less transparent overlay


frontrow('park', {
  title: "To the park!", 
  overlayColor: "#bada55", 
  overlayOpacity: 1
});
<button class="btn" id="park">Launch</button> 

Personalize


frontrow('museum', {title: "To the museum!",
  overlayColor: "#bada55",
  overlayOpacity: 1,
  confirmBtnText: "Let's do it!",
  cancelBtnText: "later"
});
<button class="btn" id="museum">Launch</button> 
And much more!

Read the docs on github