I have a search where the results are displayed in a table generated by php on my main page. I want to display the results table in a popup/modal instead of on the page. Search works fine until I put it in the modal and then nothing pops up. I took the modal code from W3 schools. Any assistance or a better way to achieve this is much appreciated.
<div id="myModal" class="modal" name="officese">
<form action="" method="Post">
<label>Office Search:</label><br>
<input type="text" name="search" size="8">
<input id="popup" type="submit" name="submit">
</form>
<div class="modal-content">
<span class="close">×</span>
<?php
include 'testing.php';
$key=$_POST['search'];
if(isset($_POST['submit'])){
$new_search=dir_search($key);
}
?>
</div>
</div>
JS
<script>
var modal = document.getElementById("myModal";
var btn = document.getElementById("popup");
var span = document.getElementByClassName("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>
CSS:
.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;
}
i used a plugin from this website and tailored it to my needs and it is working perfectly.
https://www.jqueryscript.net/lightbox/jQuery-Multi-Purpose-Popup-Modal-Plugin-popModal.html
Related
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>
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;.
I have a system that gets user data from a mysql database using PHP. The "while" statement shows the results from the database table. I want to be able to add a skill for each user in the database. I have a button that when clicked, triggers a modal popup with the user name and id. I am failing to get iterated buttons to trigger a modal popup. Only the button from the first row works.(Please forgive my English). How do i get all buttons to trigger a modal popup form that will show the respective user name and id?
Html and PHP
<table id="proj" border="0" width = "85%">
<tr >
<td width = "30%" align = "center">User ID</td>
<td width = "30%" align = "center">Name</td>
<td align = "center">Actions</td>
</tr>
</table>
<!--rows containing stuff from database-->
<?php
include 'dbcon.php';
$sql = "SELECT * FROM users";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<div class="prows">
<div class="prow" align = "center">
<div class="id1">
<?php echo $row["id"]; ?>
</div>
<div class="status1">
<?php echo $row["name"]; ?>
</div>
<div class="pm1">
<button id="bnUpdt">Add Skill</button>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 style="display:inline-block; margin-right:100px;">Name: <?php echo $row["name"]; ?></h2>
<p style="display:inline-block;margin-right:100px;">User ID: <?php echo $row["id"]; ?></p>
</div>
<form action="update.php" method="post" class="modal-body" align="center">
<div class="task" >
<input type="text" name="task" >
<button type="submit" name="button"> Add</button>
</div>
</form>
</div>
</div>
<?php
}
}
?>
Javascript
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("bnUpdt");
// 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>
CSS
<style media="screen">
.pm1, .id1, .status1{
display: inline-block;
width: 33%;
}
#sel{
display: inline-block;
width: 10%;
}
.prows{
width:80%;
}
.prow{
background-color: #d9d9d9;
padding: 10px;
border-top: 1px solid #ededed;
color:#424242;
}
.prow:hover{
background-color: #e3c7a8;
}
/* 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: 50%;
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: #42350f;
color: white;
}
.modal-body {padding: 20px;}
</style>
I would like to get each button in each row to trigger a modal popup
As explained by ryantxr, you can't have multiple IDs with same name. Add a classname and loop through them instead. Something like this perhaps? Assuming you have added class="bnUpdate" to the necessary elements.
var elem = document.getElementsByClassName('bnUpdt');
for(var i=0; i<elem.length; i++) {
elem[i].addEventListener("click", function() {
// add skill code...
});
}
Hope it helps.
I have an upload button that allows a user to upload only an image and it will be displayed in a div.
After uploading the image if the user clicks on the image I want to display the image in a popup. Please help me how to achieve this.
try this code
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
var modal = document.getElementById('myModal');
$("#blah").click(function() {
modal.style.display = "block";
$('.img').html(this);
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
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: 50%;
/* 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" height="100" width="100" />
</form>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="img"></div>
</div>
</div>
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;