I plan to open a game server and currently programming a store. What I want is a basic popup window (modal box) when a player click "purchase" it is gonna open a window where its says details and 3 buttons (Pay with paypal, pay with card , pay with wallet (Login required)). The only problem is that when I try to open a window for 1 item its shows some text (im doing for test now) but when I add other item its not poping out. I tried to fix it but its just not working and servers open in 3 weeks and that is only thing I need it. If any additional code is require I will provide to you. ALSO my point is to make few buttons to 1 popup with diffrent information (according to name(NAZWA), price(CENA) , desciption(OPIS))
MY CODE:
echo "<div class='usg'>";
echo "<p class='usg1'><img src='{$usg['img']}' width='75px; height: 75px;'</img></p> <br><br><br>";
echo "<p class='usg2'>".$usg['nazwa']."</p>";
echo "<p class='usg3'>".$usg['opis']."</p>";
echo "<p class='usg4'>".$usg['cena']."</p>";
echo "<button class='myBtn'>KUP</button>";
echo "</div>";
}
}
$conn->close();
?>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text 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")[0-1];
// 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>
Related
Im using a modal on my WooCommerce single product pages to display additional information for the users, which is only visible at the product detail page. It works also, but the script below is loaded everywhere, so I'm getting the error message:
Uncaught TypeError: Cannot set property 'onclick' of null
When someone is clicking somewhere outside of the product detail page. Is it possible to load the script only at the product detail page?
My HTML:
<button id="myBtn" class="help-link">Brauchen Sie Hilfe?</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close"><i class="nm-font nm-font-close2"></i></span>
<h4>Brauchen Sie Hilfe?</h4>
<p>Sollten Sie Fragen zu Produkten haben, oder Hilfe bei der Konfiguration benötigen, steht unser Kundenservice Ihnen gerne zur Verfügung.</p>
<p>Erreichbar von Montag bis Freitag<br>10:00 - 18:00 <br>Tel.:040/655 646 91</p>
</div>
</div>
Script:
// 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";
}
}
To restrict something in single product pages only use is_product() in an IF statement like:
<?php if ( is_product() ) { ?>
// your script goes here
<?php } ?>
See Woocommerce conditional tags
I use a modal I got from w3school and I modified it to put several modals on the same page.
I would like to know if I can make these modals generate their own links.
Example: I open modal 4 and the page link will change to mywebsite.com/modal4
The code I use is more or less like this
JS
// Get the modal
var modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
btn[0].onclick = function() {
modal[0].style.display = "block";
}
btn[1].onclick = function() {
modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
modal[0].style.display = "none";
}
span[1].onclick = function() {
modal[1].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";
}
}
HTML
<h2>Modal Example1</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal1</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..1</p>
</div>
</div>
<h2>Modal Example2</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal2</button>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal2-content">
<span class="close">×</span>
<p>Some text in the Modal..2</p>
</div>
</div>
You can change the current URL of the page when opening the modal, as seen in this answer: Modify the URL without reloading the page. To load the modal if you go to mywebsite.com/modal4, you can write some js logic to get the link, see if it addresses a modal, and then open that modal.
You may have to write some backend code to handle links like that, however, you can try to pass link parameters and then use js to parse the parameters out of the link string: How to get the value from the GET parameters?
As JagdeeshKumar pointed out below, you can also navigate to website.com/htmlpage.html#modal4, and you can use js to get that location and load up the modal. See https://www.w3schools.com/jsref/prop_loc_hash.asp
you can use
your URL will be like root/#modal4window.location.hash = 'something';
So I am trying to make a modal windows where you can see an URL. That URL is stored in a mysql database. I am generating a table with all the data from that table and some hyperlinks, one of then should be that modal window. By far I have this, but its only showing the empty modal window.
PHP main page:
echo "<td><a href='#' id='myBtn'>Url</a></td>";
<div id="myModal" class="modal">
<?php
include('url.php');
?>
</div>
PHP modal page:
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Send to:</h2>
</div>
<div class="modal-body">
<p>URL</p>
</div>
</div>
Javascript
var modal = document.getElementById('myModal');
var a = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
a.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";
}
}
I was wondering how can I make it, as I dont know how to pass data from my hyperlink to the modal or if I should make a modal for each id.
I have a problem of a simple yet confusing matter. I have two modal boxes with two separate Id's in my page. It's a simple registration and login ones. Thinking behind it was that if I use the same code yet change the id to target them individually would make things work the way I wish them to would do the job yet whenever I modify the content it appears to be identical in both of them. I have a little suspicion of where things are going wrong yet I need some guidance. Please help a girl out.
HTML
<!-- The Modal 1-->
<div id="myModal" class="modal">
<!-- Modal content 1 -->
<div class="modal-content">
<span class="close">×</span>
<p>Registration FORM WILL GO HERE..</p>
</div>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2 -->
<div class="modal-content">
<span class="close">×</span>
<p>LOGIN FORM WILL GO HERE..</p>
</div>
</div>
SCRIPT
<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>
<script>
// Get the modal
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtnn");
// 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>
I made a pop-up video button on my website.
But when i close it, or click on a modal-out space, the audio still continues.
How can i solve this problem?
I tried some javascript function, but i think im doing something wrong...
Thanks!
// 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";
}
}
<button type="button" class="button" id="myBtn">Watch Video</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Well the easiest way for you is to re-assign the iframe video src value so that it resets itself and stops. E.g. Assign your iframe an id of example id="yplayer" and then use the following statement where you want to stop and reload the video.
document.getElementById('yplayer').src = document.getElementById('yplayer').src;
The second option is to use the youtube api functions which will involve a little more code handling. Youtube API Docs
Hope this helps.
You should check out the documentation for html audio/video on https://www.w3schools.com/tags/av_met_pause.asp
I suggest you change
span.onclick = function() {
modal.style.display = "none";
}
with the following code
span.onclick = function stopVideo() {
document.getElementById('video').pause();
}