Hi All,
I have a form with a submit button under which I would like to add a text link that reads 'We respect your privacy’. I want the text link to trigger a javascript modal with a full message about protecting user’s privacy. I already have the modal working on this particular page, but it’s within a separate widget generated by a page builder, but I would like the JS action to originate from the form php.
I have identified the div that contains the submit button in the php code and I have proved that by adding some text within a span tag inside this div, that the text will render where I want it to.
The trouble is that when I add the inline CSS and JS inside the span tag the page breaks.
The following code breaks the page:
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 220px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<!-- Trigger/Open The Modal -->
<div class="respect">
<button id="myBtn" style="color: #A3A3A3; background-color: #FFF; border: none; margin-top: -2em; padding: 0; text-decoration: underline; font-size: 2em">We respect your privacy</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>We will not sell or rent this information to anyone. We will use your information to respond to you, regarding the reason you contacted us. We will not share your information with any third party outside of our organization, other than as necessary to fulfil your request.</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Argent, the description sounds like you have a combination of HTML structure and CSS problems.
The code that you posted doesn’t demonstrate the button or the context in which the button and modal reside within the page. In other words, from your posting, I can’t tell how your code works or why it “breaks” on the page.
Please post a “working page” that demonstrates the issue on the page so we can see it the way you see it.
This is a “working page” with the code that you posted:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Argent's PHP form with JS modal</title>
<!--
https://www.sitepoint.com/community/t/adding-javascript-modal-code-into-into-php-form/306891
-->
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 220px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<div class="respect">
<button id="myBtn" style="color: #A3A3A3; background-color: #FFF; border: none; margin-top: -2em; padding: 0; text-decoration: underline; font-size: 2em">We respect your privacy</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>We will not sell or rent this information to anyone. We will use your information to respond to you, regarding the reason you contacted us. We will not share your information with any third party outside of our organization, other than as necessary to fulfil your request.</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
You’ll see that the underlined text (“We respect your privacy”) triggers the modal. I would like this text link and its javascript action to replace the placeholder text which is currently under the green button.
Getting the current text under the green button required a hack to a plugin file (plugins/inbound-pro/core/shared/classes/class.form.php - line 527)
The CSS and JS code I posted here previously, runs the modal successfully (from the underlined link) but is encapsulated in a separate widget from a page builder from within the about page.
I thought I could just replace the placeholder text “We respect your privacy” in class.form.php with that CSS and JS code, but it breaks the page - at least it does in my local dev.
I don’t really understand what you are doing (as I know nothing about themes and widgets) but in order to trigger the modal you would need the correct ID on that new span.
e.g.
<span id="myBtn" style="text-align: center; display: block">We respect your privacy</span>
That will now trigger the modal as long as the other button is removed (I have copied your source code locally and it works ok).
Can you define what you mean by breaks the page as that means nothing to me. As far as I am concerned most sites are broken anyway:)
Obviously you can’t change styles for the body element as you have done in that snippet because that will not match your theme. You should only be including styles that affect the modal.
I want to replace the text “We respect your privacy” which is directly under the green button, with the grey text that triggers the modal, which is in all caps, smaller and to the lower right of the green button
The reason I want to do this is that if the modal link is inside the div that contains the green button, then it will scale with the green button as the viewport is reduced for smaller devices.
I added the id=“myBtn” as you suggested, in fact, I copied and pasted your code but it didn’t work.
Which button are you referring to when you say "That will now trigger the modal as long as the other button is removed "
When I talk about breaking the page this is what I mean:
I think we must be talking at cross purposes a little so I’ll start with what I see at the moment
Using the source from this page I added the ID I mentioned to the text under the green button and removed the underlined button text that was to the side. The modal is now triggered and displays ok without error.
If you meant something else then you will need to explain what I have misunderstood. Maybe if you made the changes I suggested and uploaded that amended page online we can see if it works or not or whether I have got the wrong end of the stick altogether
Note that I did move your closing div tag to be after the closing form tag as you had it in the wrong place. There also seems to be a typo in your script as my editor suggests an error so I added single quotation marks around this section:
/* helper function for validating email */
function inboundFormsVaidateEmail(email) {
var re = '/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/';
return re.test(email);
}
However you will need to check with the js forum if that is correct or whether its just my old editor not seeing it properly.
Neither of those should have a bearing in this problem anyway.
I don’t get that error and is unlikely to be anything to do with css and html.
Thanks, are you working on the premise that this can be made to work using a simple HTML page? Forgive me if I didn’t mention this, but this is a Wordpress site we’re working on and as far as I am aware there are two parts to this: the class.form.php file at line 527, where the changes need to be made and the JS & CSS code which runs the modal.
How do I get the class.form.php file to talk to the JS & CSS code?
Hi, I’m afraid I don’t do wordpress so can move the thread if you want to somewhere more appropriate?
The browser is only concerned with the generated html (no matter where it came from e.g. many individual php files) and you seem to have it all in place in your demo here.
As long as the generated source is showing the correct html then the css and js will take effect as usual even if it originally came from different sources (assuming scripts are placed after the htnl that they refer to).
I can’t really help with the wordpress aspect but at the end of the day a page works via its generated css and html no matter how you have cobbled it altogether.
As shown by my screenshot the modal works when the id is added so you need to adjust your includes accordingly.
Sorry I can’t help with the wordpress side of things but I can move the thread to a more appropriate section if required?
PaulOB,
Many thanks for your time on this. I have to admit, my interpretation of your advice is probably not up to the required technical standard. I emailed the plugin developer and they appear to want to take this on as a future built in feature in their next update, and have supplied a temporary hack.
Thanks again to you and Ronpat for helping me.
