Develop Reference

Pure Javascript Popup / Modal Leaving Site Consent

I tried creating simple popup leaving site consent.
demo: See demo on codepen
function exModal() {
const modalhtml=` <div class="modal-header">
🔗 You're Leaving Our Site!
<span class="close-modal">&times</span>
</div>
<div class="modal-body">
This is a link to an external site. Click OK to continue to the content. Feel free to comeback again. Make Sure To Follow Instructions Properly.
<br/><br/>
<div class="show-link"></div>
</div>
<div class="modal-footer">
<button class="close-modal">Close</button>
<button class="confirm-modal">OK</>
</div> `;
const getlink = document.querySelector('.ex-link').getAttribute('data-href');
const extra=document.createElement('div');
extra.classList.add('modal-content');
extra.innerHTML=modalhtml;
document.body.appendChild(extra);
document.querySelector('.show-link').innerHTML='('+getlink+')';
const close=document.querySelectorAll('.close-modal');
document.querySelector('.confirm-modal').addEventListener('click', (e) => {
window.open(getlink, '_blank');
});
let i;
for (i = 0; i < close.length; i++) {
close[i].addEventListener('click', (e) => {
extra.remove();
});
}
}
Problem
How can I prevent the purple button from being clicked when the modal is open.
also I want to add function like when someone click ok button, It'll close the modal while opening link in other tab.
can I handle two event in with one event listener? (reference to (2) problem) then how?
A good reference will do the job. I tried googling but mostly those tutorial includes jquery or other script

Here's what I did:
I replaced
<a class="ex-link" data-href="https://www.techlegionbd.com" onclick="exModal()">Tech Legion BD</a>
with
<button class="ex-link" type="submit">Tech Legion BD</button>
in CSS I replaced
a.ex-link {
...
}
with
button.ex-link {
Finally I used a functional approach to rewrite the scrpt thus:
CSS
button.ex-link {
width: 150px;
display: block;
margin: 10px auto;
padding: 20px;
border: 1px solid white;
background-color: #6600d6;
color: white;
font-family: 'Martel Sans', sans-serif;
font-weight: 800;
text-align: center
}
.modal-content {
position: fixed;
top: 30%;
left: 50%;
margin-left: -190px;
max-width: 380px;
border: 2px dotted #008080;
}
.modal-header {
font-size: 20px;
padding: 15px;
border-bottom: 1px solid #cecece;
background: #edfdfe;
}
.modal-body {
padding: 20px;
text-align: center;
border-bottom: 1px solid #cecece;
}
.modal-footer {
padding: 10px;
background: #edfdfe;
}
.modal-footer>button {
padding: 6px 10px;
margin-left: 5px;
cursor: pointer;
width: 50px;
background: #75e4d5;
border: 1px solid #008080;
border-radius: 4px;
}
.modal-header>.close-modal {
position: absolute;
right: 0;
top: 0;
padding: 15px;
cursor: pointer;
}
HTML
<!-- <a class="ex-link" data-href="https://www.techlegionbd.com" onclick="exModal()">Tech Legion BD</a>-->
<button class="ex-link" type="submit">Tech Legion BD</button>
JAVASCRIPT
const openModalButton = document.querySelector("button");
const extra = document.createElement('div');
const getlink = "https://www.techlegionbd.com";
const modalhtml = ` <div class="modal-header">
🔗 You're Leaving Our Site!
<!-- <span class="close-modal">&times</span>-->
</div>
<span class="close-modal" onclick="closeModal()">&times</span>
</div>
<div class="modal-body">
This is a link to an external site. Click OK to continue to the content. Feel free to comeback again. Make Sure To Follow Instructions Properly.
<br /><br />
<div class="show-link"></div>
</div>
<div class="modal-footer">
<!--<button class="close-modal">Close</button>-->
<button class="close-modal" onclick="closeModal()">Close</button>
<button class="confirm-modal">OK</>
</div> `;
function openModal() {
//refewnce variables
extra.classList.add('modal-content');
extra.innerHTML = modalhtml;
document.body.appendChild(extra);
document.querySelector('.confirm-modal').addEventListener('click', (e) => {
window.open(getlink, '_blank');
});
}
openModalButton.addEventListener("click", () => { openModal() })
function closeModal() {
document.body.removeChild(extra);
}

How to auto-click on button in the website that opened in new tab

Need your help below, all codes below are from "example.com" assuming:
Click Me
When I click on "Click Me", it will run the function "gp()" below
<script>
function gp(pul){
var qal = "vo";
var tul = document.querySelectorAll('[target="'+qal+pul+'"]');
[].slice.call(tul).forEach(
function(link){
setTimeout(function(){
if(pul == 1){
window.open("http://www.example.com",qal+pul);
}else
if(pul == 2){
window.open("http://www.example.com",qal+pul);
}
},1000);
}
);
}
</script>
What script should I add in the above script to auto-click on "testbutton" below when "example.com" is load on the new tab? I need the pop out message to be appeared in new tab.
All codes below are for pop out message.
<button style="display:none;" id="myBtn">testbutton</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</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>
<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: 100px; /* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
The basic idea is, I am in the urlA, when I click on one link, it will load the same urlA in the new tab. In this new tab, when it load, I want it to auto-click on the button to trigger the pop out message.
Thanks in advance for your help.

What do you mean with auto click?
The new tab, does it open a site made by you?
You should use url params for that, I will make for you a very basic example, you have to improve this, if you want to have more functionality in it.
For html, you use:
<a target="_blank" href="http://example.com/index.html?clickButton=true">Link</a>
The parameter is added to the href link, clickbutton=true.
for the JS you simply write something like this:
function buttonClick() {
alert('pop up')
}
let url = window.location.href;
let params = url.split('?');
let myparam = params[1].split('=');
if (myparam[1] === 'true') buttonClick();
I just got the url string and used some split functions to get the result of the parameter.
There is for sure specific functions to do this in a better way, but I never used them, so I give you some basic JS code.

Modal not closing when I click X or outside

The modals I have set up for my website open but do not close when I click the X button or outside.
When I run my code in a browser I can click the button and it works. But then it will not close. I am not sure what the error is or why this does not work.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
btn1.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
/* 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);
/* 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;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>
My goal is when I click the X or outside the modal, the modal closes.

I've fixed some problems:
height of the modal, taking the 100% of the space so influencing the click
put a listener on the document, which will trigger the modal if the status is block or if it's the button.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if(btn1.contains(event.target)){
modal.style.display = "block";
}else{
if (!modal.contains(event.target) && modal.style.display === "block" || span.contains(event.target)) {
modal.style.display = "none";
}
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
overflow: auto;
height: auto;
z-index: 1px;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0);
/* 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;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>

I’d suggest combining all opening / closing modal event listeners into one, otherwise multiple event listeners run consecutively, but you only want one action to happen.
One way of achieving this behavior is to check for event.target: if the BtnWhiteSedan element is clicked, open the modal; otherwise, if neither the modal nor anything inside the modal is clicked, with the exception of the × button, close the modal. See Node.prototype.contains.
Since event is only used for event.target, use destructuring to get the target property directly.
const modal = document.getElementById("WhiteSedan1"),
openButton = document.getElementById("BtnWhiteSedan"),
[
closeButton
] = document.getElementsByClassName("close");
addEventListener("click", ({target}) => {
if (target === openButton) {
modal.hidden = false;
}
else if(target !== modal && !modal.contains(target) || target === closeButton){
modal.hidden = true;
}
});
.modal {
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="desc">
<a id="BtnWhiteSedan" class="btn btn-outline-primary" href="#">White Sedan</a>
</div>
<div id="WhiteSedan1" class="modal" hidden>
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">Model: Toyota<br> Mileage: 28,000 km<br>Transmission: Auto<br> Cost: $10,000</p>
</div>
</div>
It’s not always robust to check for CSS properties. Use the hidden attribute instead, or use a class name and modal.classList.has("hidden"), modal.classList.add("hidden"), modal.classList.remove("hidden"), with .hidden { display: none; } in your CSS. See Element.prototpye.classList. If you do use the hidden attribute, remove the CSS default, and simply add a hidden attribute to your modal as I’ve done in the code above.
I’ve also replaced var by const, onclick by addEventListener, and abstract equality by strict equality. I’ve also used more semantic variable names (e.g. closeButton rather than span).
There was also a typo in your CSS: padding-top: 50x; instead of padding-top: 50px;.

Modal close button not working

This is the code. If I open the modal, the close button will not work and will not close until the page is refreshed.
// 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";
}
}
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button onclick="document.getElementById('myModal').style.display='block'">Sign
Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
All I want is for the modal to close when the button is clicked.

In your code there is no element with id myBtn
so remove the following code
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
and it will work fine

You didn't gave the button an ID. So the javascript was failing on that line where you were adding an event listener to the button. So the statement that follows were not executed.
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button id="myBtn">Sign Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" style="display:none;" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
// 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";
}
}
Here is the solution : https://jsfiddle.net/xf7whk0o/

Use this in your closing button.
data-dismiss="modal"
Use it like:
<button type="btn btn-default" data-dismiss="modal">CLOSE</button>

Convert Javascript value into a link?

How am I able to convert the user input into a clickable link within the modal? (user entries will be in a URL format e.g. www.bbc.co.uk). The code I have used is purely from w3c schools and am experimenting how modules could be optimized.
I have added the code below.
<br><b>URL</b> <input type="text" size="40" value="" name="url" id="url" class="form-control" title="Enter the URL of a web page" onchange="displayURL()">
<br><br><br><br><br>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* 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 */
font-family: foco;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: white;
margin: auto;
font-size: 15px;
padding: 0;
border: 1px solid #888;
width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.3s;
animation-name: animatetop;
animation-duration: 0.3s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #4286f4;
color: white;
}
.modal-body {padding: 2px 16px;}
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>DEMO</h2>
</div>
<div class="modal-body">
<p>Click on the link:</p>
<p id="skkr"></p>
<a id="skkr" href="IM LOST"></a>
<script>
function displayURL() {
document.getElementById("skkr").innerHTML =
document.getElementById("url").value;
}
</script>
</div>
</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>
Thanks

It is actually very simple, you have to put the data read from the input box into an anchor tag:
<br><b>URL</b> <input type="text" size="40" value="" name="url" id="url" class="form-control" title="Enter the URL of a web page" onchange="displayURL()">
<br><br><br><br><br>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* 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 */
font-family: foco;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: white;
margin: auto;
font-size: 15px;
padding: 0;
border: 1px solid #888;
width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.3s;
animation-name: animatetop;
animation-duration: 0.3s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #4286f4;
color: white;
}
.modal-body {padding: 2px 16px;}
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>DEMO</h2>
</div>
<div class="modal-body">
<p>Click on the link:</p>
<p id="skkr"></p>
<a id="skkr" href="IM LOST"></a>
<script>
function displayURL() {
var readValue=document.getElementById("url").value;
document.getElementById("skkr").innerHTML = ''+readValue+'';
}
</script>
</div>
</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>
The important part is:
var readValue=document.getElementById("url").value;
document.getElementById("skkr").innerHTML = ''+readValue+'';

W3 Schools has a nice little demo for just this thing.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a string as a hyperlink.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "Free Web Building Tutorials!";
var result = str.link("https://www.w3schools.com");
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
https://www.w3schools.com/jsref/jsref_link.asp for reference will guide you further.
Hopefully you can figure out how to target your element to update with your user input from the example provided.

You have two elements with the id 'skkr'. That's wrong.
Remove the id 'skkr' from this line <p id="skkr"></p>
Next, update the function displayURL() like so:
var link = document.getElementById("skkr");
var url = document.getElementById("url").value;
link.setAttribute("href",url);
link.innerHTML = url;