I have a popup modal which shows after 10 seconds. But it is shown at the top of page and I want that it should be shown at the bottom of page above footer.
How can I do this?
Here is my code :
// 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("close2")[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";
}
}
.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: #2098d1;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal {
position: absolute;
top: 200px;
right: 50px;
bottom: 0;
left: 0;
z-index: 1040;
overflow: auto;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Special Offer</h4>
</div>
<div class="modal-body">
<h1 style="color:green">10% OFFER </h1>
</div>
</div>
</div>
</div>
Not sure if you need so much code. But this can be made this way:
JavaScript:
$(function () {
setTimeout(function () {
$("#popup").modal();
}, 2000);
});
CSS:
#popup {
top: auto;
bottom: 10px;
outline: none;
}
Preview
Bootply: http://www.bootply.com/DmyamsX6qg
* Click on the link and use the full screen view to check out the functionality.
Related
when i mouseover on button ,modal should appear.When i try to select any values inside the modal ,modal immediately disappears.
<button class="modalShow" onMouseOver={this.showModal} onMouseOut={this.closeModal} >
Show Modal
</button>
<div class="modal modalView" id="myModal" >
<div class="modalDialog modalClass">
<div class="modalContent">
<div class="header">
<ul class="drop">
<li>
<input type="radio" id="first" name="first" value="1" />
<label>first</label>
</li>
<li>
<input type="radio" id="second" name="second" value="2" />
<label>second</label>
</li>
</ul>
</div>
</div>
</div>
</div>
showModal= event => {
document.getElementById("myModal").style.display = "block";
/* logic***/
}
close modal function on button mouseout .
closeModal= event => {
document.getElementById("myModal").style.display = "none";
}
Your question is not clear.So anybody dont understand what did you ask.But i prepare a solution for you even so.May be this sample is enough for you.
This code has 2 options :
opening modal with pressing a button.
and When selecting anywhere on modal , modal will close.
You can check it :
// 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";
}
function closeModal() {
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";
}
}
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 {
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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div onClick="closeModal()" class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
We have opened an iframe in model dialog. In the iframe we are loading a document. The document is also and html page. The <a> tags in the document are not navigating to the id mentioned in their href.
Just a sample from the html document.
Below is the <a> example,
<a data-custom-class="link" href="#infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<p id="infoshare" style="font-size:15px;">
<span style="color: rgb(0, 0, 0);">
<strong>
<span style="font-size: 19px;">
<span data-custom-class="heading_1">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</span>
</span>
</strong>
</span>
</p>
Onclick of the <a> it should navigate to the <p>.
Though, It works perfectly when the url is browsed in the browser.
But Doesn't work in the dialog model.
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("infoshare");
// 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";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.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;
}
<a data-custom-class="link" id="infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
I want to open a modal with a function in pure javascript (not jquery).
Component from where i am calling function:
<div class="col-sm-5 offset-sm-5"
style={{ bottom: "60px", marginBottom: "20px", marginTop: "23px" }}>
<button class="btn btn-primary btn-sm" onClick={this.handleSubmit.bind(this)}>Save</button>
</div>
Function code:
handleSubmit=()=>{
document.getElementById('exchangehouse').style.display = "block"
}
Modal code:
<div class="modal fade" id="exchangehouse" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
Are you searching for this?
// 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";
}
}
/* 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 {
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;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Your Contents</p>
</div>
</div>
Here is a modern, pure ES6 implementation of a modal window.
I also included some simple open/close hooks.
class ModalWindow {
constructor(options) {
this.opts = Object.assign({}, ModalWindow._defaultOptions, options)
this.modal = document.querySelector(this.opts.selector)
this.initialize()
this.addEventHandlers()
this.afterRender()
}
initialize() {
if (this.opts.headerText) {
this.query('.md-dialog-header-text').textContent = this.opts.headerText
}
if (this.opts.htmlContent) {
this.query('.md-dialog-content').innerHTML = this.opts.htmlContent
} else if (this.opts.textContent) {
this.query('.md-dialog-content').textContent = this.opts.textContent
}
if (this.opts.theme) {
this.modal.classList.add(`md-theme-${this.opts.theme}`)
}
}
addEventHandlers() {
this.query('.md-dialog-header-close-btn').addEventListener('click', (e) => {
this.setVisible(false)
})
if (this.opts.mode !== 'modal') {
this.modal.addEventListener('click', (e) => {
if (e.target === this.modal) {
this.setVisible(false)
}
})
}
}
afterRender() {
if (this.opts.show === true) {
this.setVisible(true);
}
}
setVisible(visible) {
this.modal.classList.toggle('md-dialog-visible', visible)
if (visible) {
this.onOpen() // class method override or callback (below)
if (typeof this.opts.onOpen === 'function') {
this.opts.onOpen(this.modal)
}
} else {
this.onClose() // class method override or callback (below)
if (typeof this.opts.onClose === 'function') {
this.opts.onClose(this.modal)
}
}
}
query(childSelector) {
return this.modal.querySelector(childSelector)
}
// Example hooks
onOpen() { }
onClose() { }
}
ModalWindow._defaultOptions = {
selector: '.md-dialog',
show: false,
mode: 'modal'
}
class MyCustomModalWindow extends ModalWindow {
constructor(options) {
super(options)
}
onOpen() {
console.log('Opened!') // or you can use options.onOpen
}
onClose() {
console.log('Closed!') // or you can use options.onClose
}
}
let modal = new MyCustomModalWindow({
show: true, // Show the modal on creation
mode: null, // Disable modal mode, allow click outside to close
headerText: 'Hello World!',
htmlContent: '<p>This is an example of the popup.</p>',
theme : 'dark',
onClose : (self) => {
console.log('Another close hook...')
}
})
document.querySelector('#show-modal-btn').addEventListener('click', (e) => {
modal.setVisible(true)
})
.md-dialog {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.md-dialog.md-dialog-visible {
display: block;
}
.md-dialog .md-dialog-window {
border: 1px solid #888;
background-color: #fefefe;
width: 80%;
margin: 10% auto;
}
.md-dialog .md-dialog-header {
position: relative;
width: calc(100% - 0.5em);
height: 1.667em;
font-weight: bold;
font-size: 1.33em;
line-height: 1.667em;
padding: 0.125em 0.25em;
background-color: #DDD;
}
.md-dialog .md-dialog-header-close-btn {
position: absolute;
font-weight: bold;
top: 0;
right: 0;
width: 0.875em;
height: 0.875em;
line-height: 1em;
padding: 0.1em;
color: #7F7F7F;
}
.md-dialog .md-dialog-header-close-btn:before {
content: '\2715';
}
.md-dialog .md-dialog-header-close-btn:hover,
.md-dialog .md-dialog-header-close-btn:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
background: #F00;
}
.md-dialog .md-dialog-content {
width: 100%;
padding: 0.25em;
}
/** Example Dark Theme */
.md-theme-dark.md-dialog {
background-color: rgba(0, 0, 0, 0.8);
}
.md-theme-dark.md-dialog .md-dialog-window {
border: 1px solid #666;
background-color: #111;
color: #EEE;
}
.md-theme-dark.md-dialog .md-dialog-header {
background-color: #000;
}
.md-theme-dark.md-dialog .md-dialog-header-close-btn {}
.md-theme-dark.md-dialog .md-dialog-header-close-btn:hover,
.md-theme-dark.md-dialog .md-dialog-header-close-btn:focus {}
.md-theme-dark.md-dialog .md-dialog-content {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<button id="show-modal-btn">Open Modal</button>
<div id="myModal" class="md-dialog">
<div class="md-dialog-window">
<div class="md-dialog-header">
<div class="md-dialog-header-close-btn"></div>
<div class="md-dialog-header-text">$header</div>
</div>
<div class="md-dialog-content">$content</div>
</div>
</div>
In Bootstrap 5 (Beta 1) this gets as simple as this:
Your button (having onClick function call):
<button type="button" class="btn btn-primary" onclick='openModal()'>
Launch demo modal</button>
Your Modal:
<div class="modal fade" id="myModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And finally, the "pure" java script function:
<script type="text/javascript">
function openModal() {
var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false });
myModal.show();
}
</script>
well usually the option of modal for visibility is managed in state as boolean type.
you have to change the value of visibility as true(which is open) or false(and close), if there is no function that make visibility as false then you can't close the modal.
which mean is you need to use 'function' to change the 'value of visibility' that where in 'state' to control the modal view.
in react way.
view =( open modal )==> action === ( visibility) ==> state ===( change the value)===> view
and also your question is very abstractive.
anyway i hope that my answer can help you.
I am pretty much new to the coding world, specially when it comes to using JS or jQuery.
I have found online how to open a modal to display information. I am currently working on a page where, when you click on an image, it displays a modal with the information of the product.
I have been able to make one button work displaying information, but when I trigger the second button, it makes both buttons display the same information.
I can't see where I'm going wrong.
Here is the code I'm using.
// 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";
}
}
// Get the modal
var modal = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn = document.getElementById("modaltwo");
// 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";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin-top: 110px;
height: 680px;
}
/* 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;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>
You are using same variable names for both modals. you need to change variable names in order to store different information in it.
As you mentioned that you are beginner in JS, you should read more about scoping, this post will help you.
// 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";
}
}
// Get the modal
var modal2 = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn2 = document.getElementById("modaltwo");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal || event.target == modal2) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin-top: 110px;
height: 680px;
}
/* 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;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>
I need to play a video when the play button is clicked. But I need this video to play on the same page with the background faded out. The video needs to be displayed like a pop up video. I'm having problems getting the video to come up as a pop up when the image is clicked. I need it to be something like this when I click the watch a video. How can I go about doing this?
<div class="col-md-12 f-play-video">
<img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png">
</div>
.f-play-video{
text-align: center;
margin-top: 80px;
}
.play-button{
width:50px;
}
https://jsfiddle.net/4dd4ze53/3/
I guess The Modal Box will solve your problem. Just insert your video code into the box.
<head>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.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;
}
</style>
</head>
<body>
<button id="myBtn">Click here for video!</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.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";
}
}
</script>
Following #ilmk, #A.Lau and #coskikoz, I managed to get the pop up working using bootstrap modal. This is my working code.
<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal">
<img src="images/play-video.svg">
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Video</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&controls=0" "frameborder="0" allowfullscreen autoplay></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The example you have uses an onclick function to create a model at the end of the document and an overlay element at the top of the body, then appends the text in the model and replaces the video link.
onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"