Similar questions like this has been posted before but none solved my issue. I'm trying to get enrollments.php page to show as a modal popup within index.php page
index.php
<button class="sess_btn sess_btn1" id="btn_enrol">Enrollments</button>
<div id="enrolModal"></div>
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
//using ajax post
$.post('enrollments.php',function() {
$('#enrolModal').html(); //Fill DIV enrolModal with enrollments.php content
})
//Calling Modal
$('#myModal').modal('show');
})
})
//-------------
</script>
enrollments.php
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
Also, when I try to click on the button several times there are quick blinks on the browser window. Any help will be appreciated, thanks.
Did the corrections in code to use the jquery API correctly. Not tested but, below code will work.
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
$.post( "enrollments.php", function( htmlContents ) {
$('#enrolModal').html( htmlContents );
//Show the Modal once you get enrollments.php html contents
$('#myModal').modal('show');
});
})
})
//-------------
</script>
Thanks for the answer, I got it done a little differently. Instead of a button I used a link as shown.
index.html
<script>
$(document).ready(function() {
$('.li-modal').on('click', function(e){
e.preventDefault();
$('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
})
});
</script>
Enrollments
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
enrollments.php
<script>
// Get the modal
var modal = document.getElementById('theModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
}
</script>
<div id="model-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<p>Session Editor</p>
</div>
<div class="modal-body">
<p>Select Session: </p>
</div>
<div class="modal-footer">
<p>Modal Footer</p>
</div>
</div>
Related
I am trying to make multiple modals that show different stuff when opened but, only the first modal will close and the second modal won't close when I press the span button. when console logged it only shows the first modals spans id it won't show the second spans id. is their ant DRY way of fixing this.
HTML
<!--Work-->
<div id="work">
<h2>Work</h2>
<ul>
<li>
<button class="nobs-modal-btn"><img src="./assets/images/favicon.oe.ico" alt="No Ordinary Burritos website" width="200px" height="200px"></button>
<p>No ordinary burritos</p>
</li>
<li>
<button class="run-buddy-modal-btn"><img src="./assets/images/hero-bg.jpg" alt="" width="200px" height="200px"></button>
<p>Run buddy</p>
</li>
</ul>
</div>
<!-- end Work -->
<!-- nobs Modal -->
<div id="nobs-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- run buddy Modal -->
<div id="run-buddy-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="./assets/images/hero-bg.jpg" alt="">
</div>
</div>
js
// Get the modal
var nobsModal = document.querySelector("#nobs-modal");
const runBuddyModal = document.querySelector("#run-buddy-modal")
// Get the button that opens the modal
var nobsBtn = document.querySelector(".nobs-modal-btn");
const runBuddyBtn = document.querySelector(".run-buddy-modal-btn");
// Get the <span> element that closes the modal
var span = document.querySelector("span");
// display modal
nobsBtn.addEventListener('click', () => {
nobsModal.style.display = "block"
})
runBuddyBtn.addEventListener('click', () => {
runBuddyModal.style.display = 'block'
})
span.addEventListener('click', () => {
nobsModal.style.display = "none"
runBuddyModal.style.display = 'none'
})
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == runBuddyModal) {
runBuddyModal.style.display = "none";
}
})
window.addEventListener("click", function(event) {
if (event.target == nobsModal) {
nobsModal.style.display = "none";
}
console.log(event)
})
I've been using the following code in Sharepoint and the buttons work just fine, however, when the modal appears it will only stay open for about 5 seconds and then it closes automatically. However, when I use this code outside of Sharepoint, all works as expected. I'm not sure if there is a specific piece that I am missing for Sharepoint.
<div class="icons">
<div class="icon-boxes">
<div class="icon-boxes-Asset">
<div class="zoom2">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
</button>
</div>
</div>
</div>
</div>
<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<div class="Asset-content">
<img class="image-icon" src="Asset.jpg" alt="">
<div class="Heading-Asset">
<div class="Heading-Asset-Name" alt="">
<h2>Asset Page</h2></div>
<div class="Heading-Asset-Address" alt="">
<h3>Washington State</h3></div>
</div>
<span class="close-Asset">×</span>
</div>
<div class="line"></div>
<div class="Asset-content-info">
<body>Lorem</body>
<br>
<br>
<body>Lorem.</body>
<p>Contact: (A) SOS Phillip (360) 333-3333</p>
<p>Asset Page</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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>
</div>
<!----------------------------------------->
Ok a bit more explanation for the title, i have a modal that was from a template I bought that only really showed how to open it with a button, but I want the modal to show upon page load.
The problem is it doesn't open upon page load using this code:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks on the button, open the modal
$(window).on('load',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>
please try this onload page
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
use this html if...
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
hope above code will help you and below link will also helpful
Launch Bootstrap Modal on page load
thanks
How do I use an anchor tag instead of a button to trigger the modal? I can't use Bootstrap because I need to modify the size of the modal. I tried putting the ID in the href but that didn't help. Any suggestions?
// 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";
}
}
<!-- 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>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
If you simply change the existing <button> tag to <a> then your existing JS code should work. The principle is exactly the same, to get a reference to the element by ID and then attach a click handler.
But to get the anchor to display as a link it needs an href, so I've used href="#", and then updated the click function to cancel the default click behaviour.
You probably also want some CSS to hide the modal initially.
// 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(e) {
e.preventDefault(); // ADDED this line
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";
}
}
#myModal { display: none; } /* added this CSS */
<!-- Trigger/Open The Modal -->
<a id="myBtn" href="#">Open Modal</a> <!-- changed tags, added href, kept id -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
body html code:
note: that id is to differentiate the button click
foreach($threads as $t) { ?>
<button id="myBtn<?php echo $ids;?>" Open Modal</button>
<? } ?>
This is the modal code how can apply fetch data in here modal?:
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p></p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
This is the Javascript:
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// 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 == modal1) {
modal.style.display = "none";
}
}
</script>
How can I manage modal in different value, if I'm fetching data from the database?