Modal width as percentage

SOLVE
mattgen180
Participant

I'm attempting to add a modal to one of our pages using this walkthrough:

http://designers.hubspot.com/blog/how-to-implement-a-modal-on-your-cos-site-pages

 

I'm doing it on this page (only the first case study has the modal applied to it right now):

https://go.generation180.org/solar-schools-0?hs_preview=VcVsbjgx-5432422612

 

Everything is working with just a couple of exceptions. I'd like to have this modal be more responsive. Since it is a fixed width, I'm getting some issues. I've tried using percentages for the width but for some reason, the modal doesn't stay centered.

 

Any help would be greatly appreciated!

0 Upvotes
2 Accepted solutions

Accepted Solutions
TRooInbound
Solution
Key Advisor

Hi @mattgen180,

 

We prefer to use Magnific Popup due to:
1) Responsive lightbox
2) Light and modular
3) Content is resized with CSS

 

Below is the step to integrate Magnific Popup in your page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<script>
$(document).ready(function(){
  $('.OpenModal').magnificPopup({
    type:'inline'
  });
});
</script>

Below is the anchor link in which you need to open popup

<a href="#myModal" class="OpenModal"> {{ your anchor content }} </a>

below is the body for popup to open on above anchor action

<div id="myModal" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

and here is some basic style to add to your popup.

<style>
  .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
  }
</style>

Note: Please visit Magnific Popup Plugin for more information.

 

Let us know if you have any concern about this solution.

Team TRooInbound!

View solution in original post

0 Upvotes
TRooInbound
Solution
Key Advisor

Hi @mattgen180,

 

It's easy to implement multiple popup in one page you just need to change in HTML.

 

Eg. If I had For 2 Popups in my page then Popup 1 below code is needed

<a href="#myModal1" class="OpenModal"> {{ your anchor content }} </a>

<div id="myModal1" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

 

For Popup 2 below code is needed

<a href="#myModal2" class="OpenModal"> {{ your anchor content }} </a>

<div id="myModal2" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

 

Make Sure that the href  of anchor tag and id of content wrapper tag both have same value. i.e. for above example it is myModal1 and myModal2 respectively.

 

NOTE: In case if you use this plugin you may encounter css/js conflict due to references available for both plugin, so we suggest you to remove existing plugin (reveal.js) references.

 

We hope it helps you.

Team TRooInbound!

View solution in original post

0 Upvotes
3 Replies 3
TRooInbound
Solution
Key Advisor

Hi @mattgen180,

 

We prefer to use Magnific Popup due to:
1) Responsive lightbox
2) Light and modular
3) Content is resized with CSS

 

Below is the step to integrate Magnific Popup in your page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<script>
$(document).ready(function(){
  $('.OpenModal').magnificPopup({
    type:'inline'
  });
});
</script>

Below is the anchor link in which you need to open popup

<a href="#myModal" class="OpenModal"> {{ your anchor content }} </a>

below is the body for popup to open on above anchor action

<div id="myModal" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

and here is some basic style to add to your popup.

<style>
  .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
  }
</style>

Note: Please visit Magnific Popup Plugin for more information.

 

Let us know if you have any concern about this solution.

Team TRooInbound!

View solution in original post

0 Upvotes
mattgen180
Participant

Great! Thanks for this!

 

Any quick tips on how to make multiple of these on one page? Would I need to edit, the JS, HTML, and CSS?

TRooInbound
Solution
Key Advisor

Hi @mattgen180,

 

It's easy to implement multiple popup in one page you just need to change in HTML.

 

Eg. If I had For 2 Popups in my page then Popup 1 below code is needed

<a href="#myModal1" class="OpenModal"> {{ your anchor content }} </a>

<div id="myModal1" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

 

For Popup 2 below code is needed

<a href="#myModal2" class="OpenModal"> {{ your anchor content }} </a>

<div id="myModal2" class="white-popup mfp-hide">
  {{ your popup content }}
</div>

 

Make Sure that the href  of anchor tag and id of content wrapper tag both have same value. i.e. for above example it is myModal1 and myModal2 respectively.

 

NOTE: In case if you use this plugin you may encounter css/js conflict due to references available for both plugin, so we suggest you to remove existing plugin (reveal.js) references.

 

We hope it helps you.

Team TRooInbound!

View solution in original post

0 Upvotes