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();
}
Related
I have in my site a lot of images and through each one, you can open a different iframe that includes an interactive ad that is related to the image from where you opened it.
The thing is that with the code that I´m using, I can only open the first iframe.
Here is a demo of my site and what I´m trying to do. You can see that if you click on the images, you will only me able to open the first iframe:
http://kickads.mobi/richmediagallery/index_test_iframe.html
I want to know if someone could help me to solve this.
The JS code that I´m using is this one:
<script>
// Get the modal
var modal = document.getElementById('MyModal');
// Get the button that opens the modal
var div = document.getElementById("myDiv");
// Get the button that opens the modal
var img = document.getElementById("myImg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
div.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on the button, open the modal
img.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
var freezeVp = function(e) {
e.preventDefault();
};
</script>
And here is a demo of how the image opens the iframe:
<div id="ad1" class="portfolio-item deporte col-md-3">
<div class="portfolio-box">
<div class="portfolio-image-wrap">
<img id="myImg" src="img/portfolio/image.jpg" alt="" />
</div>
<div class="portfolio-caption-mask" id="myDiv">
<div class="portfolio-caption-text">
<div class="portfolio-caption-tb-cell">
<h5 class="alt-title">Puzzle ad</h5>
<p>Nike Made to fly</p>
</div>
</div>
</div>
</div>
</div>
<div id="MyModal" class="modal">
<span class="close">×</span>
<div class="contenido">
<iframe style="height: 480px; width: 320px" src="http://kickads.mobi/test/ad" frameborder="0"></iframe>
</div>
</div>
As it's been said you cannot call multiple elements using same IDs.
Two elements cannot have the same ID.
If you want to assign multiple elements in the same variable I recomend you to use : var div = document.getElementsByClassName("name");
More details here.
I would like to get the other icons to work how the "Operations Management" is working. But I want it to say different things.
PLEASE HELP :(
Here is my fiddle : https://jsfiddle.net/RonaLochner/p4kt6oy1/
The Code:
<div class='circle-container'>
<a href='#' class='center'>
<h4 style="text-align:center;">Microsoft Dynamics 365</h4>
</a>
<div id="operations-management">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
</div>
<div id="reporting">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon3.png' id="myBtn">
</div>
<div id="supplychain">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon4.png' id="myBtn">
</div>
<div id="sales">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon5.png' id="myBtn">
</div>
<div id="financial">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon6.png' id="myBtn">
</div>
<div id="project">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon1.png' id="myBtn">
</div>
</div>
The model:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>OPERATIONS MANAGEMENT</p>
</div>
</div>
The Script
<script>
// Get the modal
var modal = document.getElementById('myModal')
// Get the button that opens the modal
var btn = document.getElementById("operations-management");
// 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 have tried to target using different ID's but not sue how to fix this.
So first thing you want to do is add a class to each of the icons/buttons like so;
<div class="toggle" id="operations-management">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
</div>
Then you want to call them using querySelectorAll and convert it to array
// Get the button that opens the modal
var btns = Array.from(document.querySelectorAll(".toggle"));
We convert it to array because querySelectorAll returns a node list but we need an array to iterate through all the buttons so thats where the Array. So then we itierate over all of the buttons and add a event listener that points to a new function showModal
btns.forEach(function(btn) {
btn.addEventListener("click", showModal);
});
The showModal function will show the modal.
function showModal(e) {
modal.style.display = "block";
}
now you have you probably want to have different content in each modal right? I would make the p tag in your modal with an id and then using the (e) variable from the showModal function I would find the id of the button and then have an if statment that would change the modal p tag depending on the id that is passed from e. (if you set console.log(e) just before I set the modal.style.display you will see an object and there you can find the id.
How do I prevent a webpage in an Iframe from reloading when the parent page does a postback?
Below is a simple .aspx page. When I click Button1, which does a postback, the iframe that has blank.aspx as its source is reloaded. How can I prevent this from happening? Code is below.
<div>
This is an empty page with a button to open a modal window in an iframe
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
<asp:Label ID="lblPostback" runat="server" Text="Initial Load"></asp:Label>
<!-- Trigger/Open The Modal -->
<button id="myBtn" type="button">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>
<iframe src="Site/Public/blank.aspx"></iframe>
</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 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";
}
}
</script>
</div>
You could wrap the elements that will change during the postback inside an UpdatePanel. Providing the iframe is then outside of the UpdatePanel, it should not reload when posting back.
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 want to make a video site. Where Users can play video. But the problem is when users want to play video they need to subscribe my youtube channel then they can play videos. I made a modal when users click on play video the modal will ask to subscribe my channel. Now i need that when users subscribe my channel they will redirect to the video page and they can play the videos.
Anyone can help me about it...
html code is here
<h2>Bottom Modal</h2>
<!-- 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">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<h2>Verify By Subscribing Us</h2>
<button onclick="myFunction()">Subscribe</button><br><br>
</div>
<div class="modal-footer">
<input type="submit" value="Confirm Subscription" class="confirm">
</div>
</div>
</div>
The modal js code is here
// Get the modalM
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("confirm")[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";
}
}
function myFunction() {
var myWindow = window.open("https://www.youtube.com/channel/UCODLiqqTQZcQxiBLNeeFqDw?sub_confirmation=1", "MsgWindow", "width=600,height=800");
}