Using Modal Snippet

[brianjking]

Hi @andyhqtran,

I'm trying to use the Modal snippet you've provided here: https://github.com/andyhqtran/Divi-Resources/tree/master/Snippets/Modal and am having some trouble.

I'd like to display a Divi Contact Form inside of it, is this possible?

When I simply paste the code you've provided into the code module and publish the new page I get a console error and the page displays this:

[andyhqtran]

@brianjking can you please provide the console error that you receive? If possible a live demo of the page as well.

[victorespigares]

Hi @andyhqtran,

Taking advantage of this thread, I'm wondering why you're not using Magnific Popup (part of the plugins Divi uses) for the modal.

I'm currently using something like this:

  $('a.popup').live('click', function(e) {
      e.preventDefault();
      var $this = $(this);
      var id_element = '#popup-community';

      if ($this.data('popup-id') !== 'undefined') {
        id_element = $this.data('popup-id');
      }   

      $.magnificPopup.open({
        items: {
          type: 'inline',
          src: id_element
        }   
      },0 );  
      return false;
    }); 

And I don't have to mess with styles, etc. Whenever I want a modal I just add a link with class="popup" and data-popup-id="#div-id-to-show" and I'm good to go ;)

ps: @brianjking sorry for the hijack, but maybe this can help you as well!

[brianjking]

@victorespigares -- I'm a bit confused, how would I go about putting a divi contact form into a modal using this method? Thanks!

[brianjking]

@andyhqtran Strange, I was getting errors for this modal snippet as well as the banner snippet yesterday. The modal appears correctly today, however, I still need some guidance as to how I can input a Divi Contact Form into this modal.

http://robotbear.me/24901-2/

Thanks!

[victorespigares]

You can assign the contact form an id (#contactform) and add a "display:none;" as custom CSS for it. 
Then add that snippet I pasted in a Code module and a Text module with a link with the class="popup" and data-popup-id="#contactform":
<a href="#" class="popup" data-popup-id="#contactform">this trigger the popup</a>
Hope this helps!

http://VictorEspigares.com

    _____________________________

From: Brian J King [email protected]
Sent: domingo, junio 26, 2016 5:02 p. m.
Subject: Re: [andyhqtran/Divi-Resources] Using Modal Snippet (#4)
To: andyhqtran/Divi-Resources [email protected]
Cc: Victor Espigares [email protected], Mention [email protected]

@victorespigares -- I'm a bit confused, how would I go about putting a divi contact form into a modal using this method? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[andyhqtran]

@victorespigares it was just something that I came up within seconds. I really didn't dig much into what Divi already had. However, what you have it a great way for @brianjking to achieve his goal of dropping a form into the modal! :)

@brianjking Glad it's working for you now!

[lukecav]

Gravity Forms and most opt-in form options work great in Popup Maker.

https://github.com/PopupMaker/Popup-Maker

[brianjking]

@andyhqtran - So are you saying with the snippet you've provided I cannot place a Divi Contact Form module into this?

@victorespigares - I'm going to try to piece together what you've submitted here. Any other guidance would be much appreciated.

@lukecav - Yeah, I'd just prefer to not add any plugins unnecessarily. GravityForms is rather expensive when this site doesn't need anything more than an email form. ContactForm7 works, but it's not very straightforward to most clients I work with.

[devinhyden]

@victorespigares Thank you! I've been driving myself crazy attempting to get the modal working with the fixed header and the z-index value issues. I knew there Divi already loaded a library to perform that function, but did not think to go down the path you mentioned! It's always good to have another set of eyes or brain for the matter. Thanks again!

[muks999]

PLEASE! tell me how to open modal window with divi contact form???
on the page i have to...^
-insert code module with snippet
-add link to button
-add cont form with ID
and..nothing(