We Keep Coding

Modal issue with html button updated by javascript

I am using the following javascript code to update my HTML.
document.querySelector(".long-copy").innerHTML = "Once, there was a boy who became bored when he watched over the village sheep <a class=\"word-button\">grazing</a> on the hillside.";
This updates my HTML DOM (this one) dynamically.
<div>
<p class="long-copy"></p>
</div>;
Now, in my code - the word "grazing" is a tag. When someone clicks on this "grazing" button, a modal window should open. BUT this is not working as when I run this javascript code, I get an error "Cannot read property 'addEventListener' of null". Please help.
const btn1OpenModal = document.querySelector(".word-button");
btn1OpenModal.addEventListener("click", openModal);
const openModal = function () {
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
};
CSS added >>
.hidden {
display: none;
}
.word-modal-one {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background-color: white;
padding: 6rem;
border-radius: 10px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
overflow: auto;
}
.word-modal-one::-webkit-scrollbar {
display: none;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(1px);
z-index: 5;
}

Instead change your <a> tag HTML to this:
var myHTML = "text text more text <a href='javascript:void(0);' onclick='openModal()'>My a element</a> more text text more text";
function openModal() {
//Open that modal
}
I added the javascript:void(0) because without that, some browsers like to use the <a> tag to redirect, because it does signify a link, and that void stops the link from executing a redirect to the same page and lets you carry on with your JS on the same page
The reason why your addEventListener fails is because the script looks for an element that doesn't exist yet, and so you can bypass that by attaching the event listener yourself onto the element

Wordpress sidebar positioning on page and post

for a few hours now I'm trying to solve a problem I encounter with the standard sidebar on my localy hosted wordpress site.
The code of my sidebar is the following:
CSS in the Customizer:
function mySlide(){
var x = document.getElementById("sidebar");
var y = document.getElementById("slider");
if(x.style.right === "0px"){
x.style.right = "-305px";
y.src = "arrow_left.png";
}else{
x.style.right = "0px";
y.src= "arrow_right.png";
}
}
#sidebar{
background-color: #571e0b;
padding: 0px 0px 0px 20px;
position: fixed;
top: 50px;
right: -305px;
height: 100%;
width: 300px;
transition: 0.5s;
-webkit-transform: 0.5s;
z-index: 2;
}
#slider {
padding: 10px;;
height: 50px;
position: relative;
left: -65px;
background-color: #571e0b;
border-radius: 0px 0px 0px 15px;
}
<div id="sidebar">
<input alt="slider_button" id="slider" type="image" onclick="mySlide()" src="arrow_left.png">
</div>
This kind of sidebar is positioned on posts and pages. However, the difference between the right attribute of #sidebar on pages and on post is 75px and I can't find a reason to.
The only clue I could find so far is, that it has something to do with pages being fullwidth and blogs being not.
Other characteristics of my website:
Theme: Themify Ultra v1.99
Plugins: Contact Form 7, Themify Portfolio Post, WP Super Cache
What i tried so far:
deleting everything on the affected pages.
reinstalling the theme and plugins
Would marry someone for a solution...
Kind regards

The Solution i found is a workaround with CSS. I set all pages to being not full width, and afterwards I used CSS to tell the container to resize.
It's as simple as:
#content{
width: 80%;
}

How do I load jQuery background-check plugin?

I was trying to use the jQuery background check plugin(http://www.kennethcachia.com/background-check/) but for some reason it doesn't seem to be working ?
Here is jsfiddle link https://jsfiddle.net/n9o5jy4t/
BackgroundCheck.init({
targets: '.checkbg'
});
#header_img_over {
height: 100%;
overflow: hidden;
background: rgba(28, 28, 34, 0.9);
filter: blur(20px);
z-index: 2;
}
.header_bg {
z-index: -10;
position: absolute;
overflow: hidden;
height: 245px;
min-height: 245px;
top: 0;
left: 0;
width: 100%;
}
.header_bg img {
width: 100%;
margin: 0 auto;
min-height: 300px;
}
/* The Background _Checked */
.checkbg.background--dark {
color: white;
}
<div id="blog_title">
<h2 class="checkbg">Test_title</h2>
</div>
<div id="header_img_over">
<div class="header_bg">
<img src="http://stylrs.com/v05/wp-content/uploads/2015/02/ML_Guildhall_TBL_0009-767x415.jpg">
</div>
</div>

I couldn't get it working into a Fiddle due cross origin problems, which made me give it a try into my server.
It seems you are forced by background-check script to have your images placed in the same server as the webpage. Here are two examples: the working one and the failing one.
As you can see on source, they are exactly the same but for the image url.
Hope it helps to lead a way to solve the issue :)

Confirmation Dialog with Link in message?

Sorry if this is a silly question (I am still new to web development), but is it possible to have a link in a basic confirmation dialog message?
Right now, I have a basic confirmation popup
if (confirm("Bunch of text here"))
...
But a customer wants me to add a link in that confirmation box which would open in a new window. Adding html tags in the message doesn't work since it's a message string.
Any suggestions would be appreciated.
Thanks!

You could make a modal and display it like that, or, even simpler, use bootstrap's built in modal.
HTML:
<div class="button">Click</div>
<div class="overlay">
<div class="modal"></div>
</div>
CSS:
.button {
background-color: #aa0000;
color: #fff;
padding: 5px 40px;
display: inline-block;
cursor: pointer;
}
.overlay {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
height: 100%;
width: 100%;
display: none;
top: 0;
left: 0;
}
.modal {
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background-color: #fff;
position: fixed;
height: 200px;
width: 200px;
}
JS:
$(function() {
var button = $('.button'),
overlay = $('.overlay'),
message = 'Message text',
modal = $('.modal');
button.on('click', function() {
overlay.css('display', 'block');
modal.html( message + '' + 'link' + '');
});
});
http://jsfiddle.net/HNe95/

That's not possible with the Javascript's confirm function. In order to do that you need a custom modal dialog.
If you use jQuery, you could create one by use one of these: vex, alertify, and apprise to name a few.
If you don't use jQuery, you can create one by applying some CSS and Javascripts for events. You could also follow this guide.

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?

Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.

I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}