I am trying to do something which i think many people have done; and have read some examples etc; and have tried to piece together what i need but not having any luck. What I am trying to do is have a button pass a variable to a bootstrap modal. And then somehow echo or print the variable within the modal so i know it is working. I built some code from examples I found
here is my button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
I was not sure if i could echo the image id for the variable to be passed but have done a lot of stuff like that before so seems like it would be ok (this could be an issue though)
Secondly - here is my modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
A couple of notes on this. I was really uncertain where the script should be "placed" in relation to the modal. So I just placed in the modal body.
I tried to do an alert to see the variable that was passed. Nothing is happening though. So I am hoping someone can give me some pointers on what I am doing wrong.
Thanks so much,
Gerard
Your issue could be down to using a early version of bootstrap where relatedTarget is not passed.
As in regards to your js, put it in the bottom of the body or in a separate js file reference from the bottom of the body and after any libraries, ie jquery and bootstrap.
Here is your code working with the latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Related
I'm trying quite hard, due to my inexperience, to popup a modal created with bootstrap.js on an onclick event on different cells in a table.
I put the onclick="openModal()" on the cell.
Then the script:
<script type="text/javascript">
function openModal(){
$('#modal').modal('show');} </script>
And then the div:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Of course, the script is before the </body> tag and the div outside the table.
Is there anything wrong? I know that the onclick event is not that great of a solution, but I'm still in the newbie phase!
Thanks you for your help
Luca
You forgot to add a id to your div modal.
<div id="modal" class="modal" tabindex="-1" role="dialog">
In Jquery you use '#' to select a id.
I am having issue rendering the bootstrap modal using Jquery this is what I have so far:
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Jquery
$('#update_modal').on('click', function() {
console.log("clicked");
jQuery.noConflict();
$("#myModal").modal('show');
})
there is a button which has the id as "update_modal".
Here is a Snapshot of how it look like. As you can see its not rendered everything correctly and I cannot click any where to close the modal off too.
Please can someone tell me if I have missed anything off. Thank You
Here, I have replicated the problem https://jsfiddle.net/z26sxpvk/2/
$('#update_modal').on('click', function() {
$("#myModal").modal('show');
});
#myModal {
z-index:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Problem is happening because the modal's z-index is less than modal-backdrop.
Here you go with a solution https://jsfiddle.net/z26sxpvk/3/
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
#myModal {
z-index:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Just increase z-index value for modal.
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
Hope this will help you.
This one works for me, added aria-hidden="true" in first <div>
<div class="modal" id="myModal" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning">
<small>If you don't save, your changes will be lost.</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Your modal
I tried your code and its showing perfectly and can to be closed with the button.
I assuming you to try showing and hiding modal via attriubutes before, with class="modal" and data-target="#myModal". If your modal is not showing perfectly like your code above, maybe that of this categorize :
1. Placement modal is wrong.
2. Or upgrade your bootstrap framework.
Try with attributes before, then with javascript like your code or improvement.
Hope this can help you.
Keep your spirit :D .
I can not get my modal to open. I tried just the plain HTML found on the Bootstrap 4 site and then used some Javascript. I really can not figure out what I am doing wrong. Any help would be very much appreciated!
enter code here<
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
`enter code here`<script type="text/javascript">
enter code here $("#box1modal").click(function(event){
enter code here$('#myModal').modal('show');
enter code here )};
If You are using bootstrap no need of extra scripting.bootstrap itself provides its scripts to run different animations and actions. I checked your code.
The error lies in line
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See you've set data target as #exampleModal while id of your modal is "myModal". Just change above code to
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#myModal">
And it will work fine without any other script.
Hope this Helps...
You have given the data target as examplemodal and the id of div as mymodal. Both should have been the same, thats the issue.
i test your code , every things fine just you have to make sure
1) add references
2) your code must be inside $(document).ready(function(){ ---- }
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
</body>
</hmtl>
<script>
$(document).ready(function(){
$('#box1modal').click(function(){
alert("btn click")
$('#myModal').modal('show')
});
});
</script>
I am trying to add modal to the HTML page, But unable to bring modal to the front, I've copied bootstrap sample code.
Also I tried to keep JSFiddle, Although it's working in JSFiddle, Not in my program.
So it's better to show the whole code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
It should work like this but, in my code this type output will be produced...
Image link
Hope for help...
It seems that the default z-index value of 1040 for '.modal-backdrop' is being overridden by your custom CSS styles. Make sure the z-index for '.modal-backdrop' is set to 1040.
I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});
$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.
Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>