I'm trying to catch a "click on a link" inside a bootstrap modal, but for some reason it is not working.
$(document).ready(function() {
$('#menu-mobile a').click(function() {
alert();
});
});
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Menu</h4>
</div>
<div class="modal-body">
Link 1
Link 2
</div>
<div class="modal-footer">
<button type="button" class="button xsmall" id="closeForm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What am I doing wrong?
You could use event delegation .on() like :
$(function(){
$('body').on('click', '#menu-mobile a', function() {
alert();
});
});
NOTE: You should remove one of the id's in your modal since you've two now id="menu" & id="menu-mobile".
First of all you have id attribute twice on your modal element:
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
assuming you'll change it to
<div class="modal fade" tabindex="-1" role="dialog" id="menu-mobile">
then to access even dynamically generated content within the modal, run:
$('#menu-mobile').on('show.bs.modal', function (e) {
alert();
});
Related
I have a small textarea, and as the user puts the cursor inside it, I want a modal to popup as a larger version of this textarea.
I prepared all code, but couldn't find the part of putting the cursor in the textarea to populate the modal.
Textarea :
<textarea href ="#s-fb" class="form-control" name="sfb" id="sfb" rows="2" value="" placeholder="We would appreciate your feedback to improve the website"></textarea>
Modal :
<div class="modal fade" tabindex="-1" role="dialog" id="s-fb">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
...
...
Please try this one.
$('#sfb').click(function(){
$('#s-fb').modal('show')
})
Hope this helps.
Use onmouseover event to trigger an event when the mouse is placed over the textarea.
onmouseover="showModal()"
function showModal(){
document.getElementById('s-fb').style.display = 'block';
}
You want to use the onmouseover function for your text input. Something like this will work:
<input type="text" onmouseover="$('#exampleModal').modal('show')">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I would like to update Bootstrap Modal body with some data after button is clicked but I can't add anything to it.
I have tried to use $("#queueN").append(`<p class="boardNumber">Hi</p>`); and $("#queueN").after("<p>Test</p>"); and document.getElementById("queueN").innerHTML = "<p>some text</p>"; but none of these updated my modal. Does anyone know how to properly add to modal body?
<div
class="modal fade"
id="modal"
tabindex="-1"
role="dialog"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Sėkmingai užsiregistravote!
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="queueN"></div>
</div>
<div class="modal-footer">
<a
class="btn btn-dark"
href="./puslapiai/svieslente.html"
role="button"
>Uždaryti</a
>
</div>
</div>
</div>
</div>
$("#register").click(function() {
if (document.getElementById("odontologas").checked) {
data.Odontologas.push({
KlientoNr: clientId(),
EilėsNr: queueN(data.Odontologas),
Būsena: "Eilėje",
AptarnavimoLaikas: "00:00"
});
console.log(data);
$(window).load(function() {
$("#modal").modal("show");
$("#queueN").append(`<p class="boardNumber">Hi</p>`);
});
// $("#queueN").after("<p>Test</p>");
// document.getElementById("queueN").innerHTML = "<p>some text</p>";
}
Get rid of $(window).load(). It is a deprecated method for one and is not needed inside the click handler since the page will already have been loaded for the click listener to be applied.
In addition, the window load event only fires once in the page lifecycle and is different than using $(document).ready() which will fire any time it is called after the document is loaded
I am loading data from my database into a bootstrap modal using Ajax. All of that is working fine. My issue is that after I open the modal that loads all the info from the database, whenever i open another modal on the page... It displays that modal body as well.
Modal:
View
<div class="modal fade" id="userInfoModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Javascript:
$(document).ready(function() {
$('#openUserInfoModal').on('click',function(){
var dataURL = $(this).attr('data-href');
$('.modal-body').load(dataURL,function(){
$('#userInfoModal').modal({show:true});
});
});
});
Try to define your modal body with an id then do the javascript code on it
<div id="modal-one" class="modal-body">
Then with JavaScript convert
$('#modal-one.modal-body').load(dataURL,function(){
$('#userInfoModal').modal({show:true});
});
You need to target the modals body more directly:-
$(document).ready(function() {
$('#openUserInfoModal').on('click',function(){
var dataURL = $(this).attr('data-href');
$('#openUserInfoModal .modal-body').load(dataURL,function(){
$('#userInfoModal').modal({show:true});
});
});
});
I have added #openUserInfoModal to line 4 of your JS.
I have dynamic link and each link is associated with modal pop up.
#foreach($image_data as $image)
<a href="#" data-toggle="modal" data-target="#{{$image->image_id}}">
<img src="{{asset('public/user_images/')}}/{{$image->image_name}}">
</a>
<div class="modal fade" id="{{$image->image_id}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
<div class="modal-body">
<img src="{{asset('public/user_images/')}}/{{$image->image_name}}">
</div>
</div>
</div>
</div>
#endforeach
What javascript or something else should I use to pop up this model ?
$('.buttonClass').on('click', function(){
$('#modalID').fadeIn();
});
modalID has to be determined by a data-attribute that you can give to your buttons. For example
<button type="button" class="open" data-dismiss="modal" data-id={{$image->image_id}}>
And then in JavaScript add
$('.buttonClass').on('click', function(){
let modalID = '#' + $(this).data('id');
$(modalId).fadeIn();
});
Add class="modal-open" to your as
jQuery method
$('.modal-open').on('click', function() {
$( '#'+$(this).data('target') ).show();
})
Typing from my head so there could be typos.
If the as and .modals are added dynamically then:
$(this).on('click','.modal-open', function() { ...
I have a scenario where I am uploading file using IFRAME. What I want is after succesfully uploading file, I want to close the modal pop up. But it is not working in my case. I tried like below
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('.modal-dialog').modal('toggle');
}
Also see the html for the same
<div class="modal fade" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" data-keyboard="false">
<iframe id="ifrmFileUpload" clientidmode="Static" runat="server" style="overflow: hidden; border: none" frameborder="0" scrolling="no"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So, how should I close that modal popup because my code is not working with toggle property.
I think you are calling CloseWindowFunction() inside iframe. If so then, please create a function say hideModalPopup inside parent page:
function hideModalPopup(){
$('.modal-dialog').modal('toggle');
//OR - $('.modal-dialog').modal('hide');
}
Call the above function hideModalPopup() inside CloseWindowFunction() like this. CloseWindowFunction() Edited, check below.
function CloseWindowFunction() {
alert('PDF uploaded successfully');
window.parent.hideModalPopup();
}
maybe you can try with
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('#dvFileUpload').modal('hide');
}
here for some reference for modal events
https://getbootstrap.com/javascript/#modals-events
Simply do this
$('#dvFileUpload').modal('hide');
OR
$("#dvFileUpload .close").click();
OR
$('#dvFileUpload').removeClass('show');
Try to add a class with the first div of modal for example:
<div class="modal fade test-modal" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
and then call the
$('.test-modal').modal('hide');