Comments (10)
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!
from divi-resources.
@brianjking can you please provide the console error that you receive? If possible a live demo of the page as well.
from divi-resources.
@victorespigares -- I'm a bit confused, how would I go about putting a divi contact form into a modal using this method? Thanks!
from divi-resources.
@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.
Thanks!
from divi-resources.
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!
_____________________________
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.
from divi-resources.
@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!
from divi-resources.
Gravity Forms and most opt-in form options work great in Popup Maker.
https://github.com/PopupMaker/Popup-Maker
from divi-resources.
@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.
from divi-resources.
@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!
from divi-resources.
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(
from divi-resources.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from divi-resources.