We Keep Coding

Button Onclick only working on first element

When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?

You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.

Colorbox breaking <form>

I'm using Colorbox.js for the first time and am having issues with placing a newsletter signup inside of the popup. I am assigning colorbox to my element .newsletter-popup and it is working correctly, however as mentioned the <form> within does not work. I have tested the form and it works correctly when not loading via colorbox?
Also, in the source code of my page I can see some automatically generated colorbox code #cboxOverlay and #colorbox, why do these appear when I've already assigned colorbox to my own element? I'm also not able to set options for colorbox on my element, as they don't work. Have a got this setup incorrectly?
Working Example (Appears after 3 seconds): http://development.ozonecoffee.co.uk/our-journal/
JS
setTimeout(function(){
jQuery('.newsletter-popup').colorbox({
trapFocus: false,
closeButton: true,
onComplete: function(){ $("#email").focus(); }
});
}, 3000);
// Close button
$( ".close-popup" ).click(function() {
$.colorbox.remove();
});
HTML
<div class="newsletter-popup">
<div class="modal">
<div class="close-popup"><span>X</span></div>
<div class="container">
<h4>Title</h4>
<form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&id=3caae1521b" method="get">
<input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
<input type="submit" value="Sign up" name="subscribe" >
</form>
</div>
</div>
</div>

TinyMCE reload editor

I have simple modal window with textarea:
<div class="box-modal" id="product_modal">
<div class="box-modal_close arcticmodal-close"><img id="closePopupImage" src="/images/icons/popup_icon_close.png"></div>
<div id="product_fields">
<span class="product_label">{'TEXT_PRODUCT_NAME'|tr}:</span>
<input type="text" class="product_name">
<span>{'TEXT_PRODUCT_PRICE'|tr}:</span>
<input type="text" class="product_price">
<span>{'TEXT_PRODUCT_AMOUNT'|tr}:</span>
<input type="text" class="product_amount">
<br>
<span class="product_label pr_comment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
<textarea id="product_comment" class="product_comment"></textarea>
<img class="add_one_more" src="/images/icons/add_button.png" title="{'TEXT_ADD_ONE_MORE'|tr}">
</div>
</div>
I have table with button with class .add_products_btn.
My js:
function makeTinyMceEditor() {
tinymce.init({
selector: "#product_comment",
plugins: "link"
});
}
$(".add_products_btn").click(function () {
$("#product_modal").arcticmodal();
makeTinyMceEditor();
});
So when I click in button in first time my tinymce works fine. But when I click on the second button my tinymce doesn't work (think because textarea's ids are the same every time when I click on the button).
How can I remove old id instanse from editor for use them again?
Thanks.

You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove

Open On button without access to JS File. Klaviyo. JQuery

I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.
My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.
Here is a problem similar to my, but not exactly what i was looking for.
Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.
This is how i thought i could call the pop-up onButtonClick.
My JS code
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>
or
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>
Button Html Code
<input type="button" class="button" value="Input Button" />
My Pop-Up HTML Code
<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
×
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>

I assigned id="target" to the button to let the JS to make manipulations with it.
The important thing is that the Klaviyo JS file should be load after all actions to let the embedded button work properly.
HTML Code. Button
<input type="button" class="button" id="target" value="Input Button" />
JS Code
<script>
$( "#target" ).click(function() {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
//some var for Klaviyo
...
});
// It is essentially important to load the Klaviyo JS file after all actions
$.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>

How do you specify the primary and secondary actions for a Bootstrap modal window?

I'm using Twitter's Bootstrap modal functionality. When someone clicks submit on my form, I'm testing to see if they have checked any of the available options:
$('form').submit(function(event) {
var $target = $('.column').find(':checkbox');
if( !$target.is(':checked') ){ // if none of the sub-options are checked
event.preventDefault();
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
}
});
... and showing the modal window if they haven't. I'd then like the 'primary' button on the modal to continue with the form submit, and the secondary button to simply close the modal window.
I'm sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn't give an example of how to do this.
I've set up a jsFiddle of what I have here - thanks.
EDIT - I've added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:
$('#my-modal .secondary').click(function() {
$('#my-modal').modal({
show: 'false'
});
});
The question now comes down to: 'is there a simple way to tell the form "okay, carry on" once the primary button is clicked?'

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!
Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/
And here is the code:
HTML File
<form>
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option1" />
<span>Option 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2" />
<span>Option 2</span>
</label>
</li>
</ul>
<div class="actions">
Save changes »
<!-- Hide the real submit button /-->
<input type="submit" class="hidden">
</div>
</form>
<div id="my-modal" class="modal hide fade">
<div class="modal-header">
×
<h3>Are you sure?</h3>
</div>
<div class="modal-body">
<p>You haven’t selected any options.</p>
</div>
<div class="modal-footer">
Okay »
Go back
</div>
</div> <!-- /modal -->
JS File
$(document).ready(function() {
// Verify if checkboxes were checked.
// If they weren't, show a modal
$('a.save-button').click(function() {
if ($("input:checked").length === 0) {
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
} else {
$('form').submit();
}
// prevent click jump
return false;
});
// Let's attach a listener on form submission
$('form').submit(function() {
alert('We submitted the form!');
});
// Hide modal if "Go back" is pressed
$('#my-modal .go-back-button').click(function() {
$('#my-modal').modal('hide');
alert('We went back to the form');
});
// Hide modal if "Okay" is pressed
$('#my-modal .okay-button').click(function() {
$('#my-modal').modal('hide');
$('form').submit();
});
});
I added a little CSS as well:
ul.inputs-list li {
margin-left: 10px;
}
.hidden {
display: none
}