I have this function that returns a value to display a qr
def some():
return http.request.render('as_website_sale_onepage.cria', {
'QRimage':orders.qrImage,
})
it displays in that section
<div>
<img if="QRimage" t-att-src="'data:image/jpg;base64,'+ QRimage" alt="QrCode" />
</div>
the result is this
QR image
how can i display that in a modal window?
You can use the modal from W3School W3School: How To Make a Modal Box With CSS and JavaScript
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 on 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 */
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;
}
<!-- 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>
<img src="https://i.stack.imgur.com/8ovP4.png" alt="Qr Code" />
</div>
</div>
Related
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.
I am working with this CSS/JS modal and I wanted to know is there any way to pass data to modal like we do using data-toggle in bootstrap modal.
I am going to use this inside PHP while loop so that different buttons will get printed and I want to pass data to modal after clicking on that button so data associated with that row will be passed to the modal or printed on the button after click.....
Is it possible to do with such type of modals?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 {
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>
<h2>Modal Example</h2>
<!-- 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>Some text in the Modal..</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 can just add data-* attributes to your modal's main container and use it later.
<div id="myModal" class="modal" data-foo="bar"> <!-- ... --> </div>
// Get the modal
var modal = document.getElementById("myModal");
/*...*/
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
// append data-foo value to the modal's content
modal.querySelector('.modal-content p').innerText = modal.dataset.foo;
}
Here's an example of how datasets work: https://codepen.io/kmsdevnet/pen/ExggvyP
dataset documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
Dears,
When I run this code in wordpress it is not working as should.
Thing is that I want to by clicking on each pictures is caused modal showing with text about a person on this picture.
This should looks like - three pictures in three columns, click and you can read about person on the picture.
Besides, when I scroll down or up the page, modal is going behind other pics...
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// 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; /* 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: 70%;
}
/* 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 id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementsByClassName('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
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>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src='script.js'></script>
<!-- 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>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
CSS:
/* 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;
}
JS:
// 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";
}
}
I have all this code, and it's all linked up as you can see in the code. But for some reason, it doesn't work unless I use style and script tags within the HTML. Why is this and how would I fix it?
This is all in a folder on my computer. I plan to upload it to the web later.
Try adding <script src='script.js'></script> before your </body> tag.
It seems that you are executing your JS script that depends on DOM elements script before their are loaded
if you have a folder which contain this file 3- index.html , style.css, and script.js
So basically you need to shift your script.js before body tag
CHECK THE HTML STRUCTURE BELOW ADDITIONALLY You can add the latest compiled jQuery
//your script.js structure-
// 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";
}
}
/*IN YOUR STYLE.CSS */
/* 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;
}
<!--in your index.html structure like-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- 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>Some text in the Modal..</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script><!-- ADDITIONALLY YOU CAN ADD THIS.. But RIGHT NOW Modal WILL RUN WITHOUT THIS-->
<script src='script.js'></script>
</body>
</html>