michaelmueller4321
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by michaelmueller4321
-
-
Can everyone help me?
-
I think this is a good idea and I would realize with this Accordion script https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol.
My Question is: How to open an Accordion section from an external link, like: https://www.test.com/test.html#section1
You can answer me also in this thread:
I would be very happy if I hear from you.🙂
-
I think, I have solved the problem.
Â
New Script:
Â
<script>
// Get the modal
var modal_1 = document.getElementById("myModal_1");// Get the button that opens the modal
var btn_1 = document.getElementById("myBtn_1");// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_1")[0];// When the user clicks the button, open the modal
btn_1.onclick = function() {
 modal_1.style.display = "block";
}// When the user clicks on <span> (x), close the modal
span.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_1) {
   modal_1.style.display = "none";
 }
}
</script>
<script>
// Get the modal
var modal_2 = document.getElementById("myModal_2");// Get the button that opens the modal
var btn_2 = document.getElementById("myBtn_2");// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_2")[0];// When the user clicks the button, open the modal
btn_2.onclick = function() {
 modal_2.style.display = "block";
}// When the user clicks on <span> (x), close the modal
span.onclick = function() {
 modal_2.style.display = "none";
}// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(event) {
 if (event.target == modal_2) {
   modal_2.style.display = "none";
 }
})
</script>Â
<style>
/* The Modal (background) */
.modal_1 {
 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_2 {
 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_1 {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}
.modal-content_2 {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}/* The Close Button */
.close_1 {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}.close_1:hover,
.close_1:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
/* The Close Button */
.close_2 {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}.close_2:hover,
.close_2:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}</style>
Â
Â
<!-- Trigger/Open The Modal -->
<button id="myBtn_1">Open Modal</button><!-- The Modal -->
<div id="myModal_1" class="modal_1" style="z-index: 5;">Â <!-- Modal content -->
 <div class="modal-content_1">
   <span class="close_1">×</span>
   <p>Content 1</p>
 </div></div>
<!-- Trigger/Open The Modal -->
<button id="myBtn_2">Open Modal</button><!-- The Modal -->
<div id="myModal_2" class="modal_2" style="z-index: 5;">Â <!-- Modal content -->
 <div class="modal-content_2">
   <span class="close_2">×</span>
   <p>Content 2</p>
 </div></div>
Â
-
Hello!
I use this Modal script: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
How can I include more than one modal pop ups on my site?
Thank you very much for an answer.
Michael
-
Hello!
I use this Accordion script: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol
How to open an Accordion section from an external link, like: https://www.test.com/test.html#section1
Thank you very much.
Michael
-
Hello!
I use this Accordion: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol
How to open accordion section from an external link, like: https://www.test.com/test.html#section1
Thank you very much.
Michael
How to open accordion section from an external link?
in JavaScript
Posted
THANK YOU!
I will try it.