I have a modal dialog and I'm trying to use javvascript's onClick function to close it, but it says 'closeModal not defined'.
Here is my html for the modal:
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
</div>
</div>
and here is my javascript:
<script type="text/javascript">
$(function closeModal() {
$('#popup').modal('hide');
});
</script>
I fail to understand why it says undefined because the function and onClick have the same name(closeModal) and i referenced #popupin my function to close the whole modal.
closeModal should be in global scope, $(function (){}) is shorthand for $(document).ready(function() {})
function closeModal() {
console.log(this);
// $('#popup').modal('hide');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
</div>
</div>
Also if you use jQuery you don't need use inline events you can change your example like this
$(function () {
$('.js-close-modal').on('click', function () {
console.log(this);
// your code
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default js-close-modal" data-dismiss="modal">Close</button>
</div>
</div>
Related
I'm trying to pass a value into a Bootstrap Modal and then display it when a button is clicked, however nothing is displaying when I click the button.. Can anyone help fix the issue?
I believe the issue is on the line:
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
JSFiddle: http://jsfiddle.net/9m13c4rx/
HTML
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
});
i have fixed your code
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$("#save").click(function(){
alert(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The issue is onclick is a vanilla JavaScript property for processing click events on a given element, but you are trying to implement that on a jQuery object, use jQuery's .click() instead.
Update: The best solution is to write the button click event outside the modal event handler function.
$('#save').click(function() { alert(id); });
If you still want the code to be inside the modal event then you can use flag variable based on which you can execute the button click event.
var flag = false; // set the flag to false
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
if(!flag){ // check the flag
$(e.currentTarget).find('button[id="save"]').click(function() { alert(id); });
flag = true; // set the flag to true
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My code is working but the button is not going backward after clicking.
Here is my output
Launch Demo Modal
Here is the Html code:
<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>
Here is the javascript:
<script type="text/javascript">
$('#c').click(function(){
$("#myModal").modal('show');
});
i have created a working fiddle.
JS fiddle
Just add a on click event and hide the modal.
HTML
Launch Demo Modal
<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 id = "test" type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
JS
$('#c').click(function(){
$("#myModal").modal('show');
});
$("#test").on("click", () =>{
alert("save changes")
$("#myModal").modal('hide');
})
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 .
For some reasons i cannot set id or class for my Bootstrap modal-dialog and i need a way to make them work without it, by maybe using JQuery or JavaScript?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 1</button>
<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text11 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 2</button>
<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text22 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
define onclick function to both buttons and pass this as parameter and then use next() property of jquery
<button type="button" class="btn btn-info btn-lg" onclick="firstmodal(this)" >Open Modal 1</button>
<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text11 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
js
function firstmodal(ele){
$(ele).next().modal('show');
}
Do the same for other modal as well
$(document).ready(function(){
var buttons = $(".container button");
if(buttons.length > 0){
buttons[0].on("click", function(){
//this will return two modals
var modals = $(".container div.modal")
if(modals.length > 0){
modals[0].modal("toggle");
}
})
}
if(buttons.length > 1){
buttons[1].on("click", function(){
//this will return two modals
var modals = $(".container div.modal")
if(modals.length > 1){
modals[1].modal("toggle");
}
})
}
})
Hope that solves the problem
I have called textbox onchange event and button click event. the textbox and htmlbutton in bootstrap Modal body. these events are not triggered.
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
$("#input1").change(function () {
alert("htmltext changed");
});
});
</script>
<div 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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Your Code looks fine. Not sure if you included Jquery here is the complete code
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
});
</script>
<div 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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$("#input1").on('change',function () {
alert("htmltext changed");
});
$("#input1").on('keypress',function () {
alert("htmltext changed");
});
</script>
</html>
Did the key press part seperatly for better understanding of the code.