This is the script for closing and opening the moda. It is called when I trigger the event on click. And I want to have some html in order to render that on the screen.
<!-- Script for calling the modal -->
<script>
$("body").delegate(".share.dash-button__feed", "click", function () {
var thisID = $(this).attr('data-thdkls');
$.post("/nodelike/nodelikes/dash_share/", {
data: {
postid: thisID,
}
},
/* The functionality when the "share" button is clicked */
function () {
//Load the modal
var modal = document.getElementById('share-post');
//Load the closing button
var span = document.getElementsByClassName("close")[0];
//Hide the modal if the "X" button is clicked
span.onclick = function () {
modal.style.display = "none";
}
//Load and close the modal
if (modal.style.display === 'none') {
modal.style.display = 'block';
} else {
modal.style.display = 'none';
}
//Close the modal if you click outside the modal
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
);
});
</script>
I want to include a pice of html and css into a js file.
I am not sure exactly how to do it.
<!-- The HTML Modal for sharing a post by a user -->
<div id="share-post" class="modal" style="display: none;">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some random text....</p>
</div>
</div>
Use jQuery and get the html by selecting it through using and ID selector:
var html_content = $('#share-post')[0];
console.log(html_content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="share-post" class="modal" style="display: none;">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some random text....</p>
</div>
</div>
you can use the variable html_content which contains the HTML. You can use this variable within your modal.
Related
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.
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();
}