I'm new with bootstrap, and I've code for message confirmation.
How can I put my onclick() using this code below?
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
Html of bootbox:
HTML (image)
onclick() input:
<input type='submit' name='actualiza_noticia' class='button' onClick="" value='Atualizar notícia'>
You can use either use the jQuery function $(elem).modal('show') function, or the Bootstrap html data attributes:
Using data attributes:
<input type='submit' data-toggle="modal" data-target="#myModal" name='actualiza_noticia' class='button' value='Atualizar notícia' >
Using Jquery function:
<input onclick="$('#myModal').modal('show')" type='submit' name='actualiza_noticia' class='button' value='Atualizar notícia' >
These shuold both trigger your events, although the 'show' event is 'shown.bs.modal' to be in compliance with Bootstrap 3:
$("#myModal").on('shown.bs.modal', function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
Read more about bootstrap modal here.
According to the image that reports your html my proposal is:
change $("#myModal").on("show", function() { to `$("#myModal").on("shown.bs.modal", function() {
change $("#myModal a.btn").on("click", function(e) { to $("#myModal button.button.btn.btn-primary").on("click", function(e) {
change $("#myModal").on("hide", function() { to $("#myModal").on("hide.bs.modal", function() {
change $("#myModal a.btn").off("click"); to $("#myModal button.btn.btn-primary").off("click");
For details see bootstrap modals
$(function () {
$("#myModal").on("shown.bs.modal", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal button.btn.btn-primary").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide.bs.modal", function() { // remove the event listeners when the dialog is dismissed
$("#myModal button.btn.btn-primary").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog box -->
<div class="modal-body">
<button type="btn btn-default" class="close" data-dismiss="modal">×</button>
Hello world!
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="btn btn-default" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
After a blur event on an input field "bootbox1", I want to use a Bootstrap Modal for an message, after the modal closes the focus would go to the input field "bootbox2". But the input field does not get focus.
What am I doing wrong?
Demo
HTML
<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
JS
$('#bootbox').on('blur', function checkSelection(e) {
$("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function (e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide');
$('#bootbox2').focus();
// dismiss the dialog
});
});
$("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
$('#bootbox2').focus();
});
$("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show": true // ensure the modal is shown immediately
});
});
//this works
$('#bootbox2').on('blur', function checkSelection(e) {
$('#bootbox').focus();
});
You need to wait for the hidden.bs.modal event to fire, not the hide.bs.modal.
According to the Bootstrap Docs for the event hide.bs.modal
This event is fired immediately when the hide instance method has been
called.
Whereas hidden.bs.modal
This event is fired when the modal has finished being hidden from the
user (will wait for CSS transitions to complete).
Since your focus is being called before the overlay has been removed the input cannot take the keyboard focus yet.
Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.
<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>
<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-bootstrap-dialog modal-sm">
<div class="modal-bootstrap-content">
<div class="modal-bootstrap-body">
-- content ----
</div>
</div>
</div>
<div class="modal-bootstrap-footer">
<button type="submit" class="button primary" data-dismiss="modal">Close</button>
<button type="submit" class="button primary">Save changes</button>
</div>
</div>
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
bootply
You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.
Just remove the data attributes and go with the Javascript method:
<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>
<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<!-- modal contents -->
</div>
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
} else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
I had same problem. Remove fade class.
I had the same problem, tried a lot of things but the only solution that worked for me is #Tang Chanrith suggested to remove individually parts of the modal but a little bit improved to place back and the scrollbar. I'll put my answer just if the accepted answer did not work for them. Sorry for my english. Hope I helped.
#Tang Chanrith
Try this function
function hideModal() {
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$("#myModal").hide();
}
Improved Sollution
You just have to delete a class from body and css that generated
function hideModal() {
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$("#myModal").hide();
}
For those still having issues (hi Googlers!), if you're using fade, you'll have to use javascript to remove fade class.
Try this function
function hideModal(){
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$("#myModal").hide();
}
Remove the modal class "fade" will do.
I have solution this problem.
$('#landingpage, body').on('click',function(){
$( ".action-close" ).trigger( "click" );});
try to add return false like this:
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
return false;
});
I checked your code.
Now you compare a == 5. but a is always 4. you may have to check this why you are doing this comparison.
Also you need you remove the data-target if you want to open modal from javascript :
<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>
data-target directly opening the modal.
Check if this is working.
You should try this $('.modal.in').modal('hide')
Via https://github.com/twbs/bootstrap/issues/489
I had the same problem, my mistake was that I was trying to open the modal window a few times. We must test that the modal window is not already open before trying to open it.
if (!($("#MyModal").data('bs.modal') || {})._isShown){
$("#MyModal").modal('show');
}
Hide modal dialog box using bootstrap
Method 1: using bootstrap
$('.close').click();
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');
Method 2: using stop-propagation
$("a.close").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Method 3: After shown method invoke
$('#myModal').on('shown', function () {
$('#myModal').modal('hide');
})
Method 4: Using CSS
this.display='block'; //Set block css
this.display='none'; //set none css after close dialog
In the java script code you need to add one line of code
$("#savechanges").on("click", function (e) {
$("#userModal").modal("hide");
e.stopPropagation(); //This line would take care of it
});
As I encountered, sometimes you need to remove display style:
style="display: block;"
I had the same issue. I tried the JavaScript way suggested in the post, unfortunately it only worked half of the time. If I triggered my modal a few times, it bugs out. As a result I created a work around using CSS:
/* Hide the back drop*/
.modal-backdrop.show {
display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
background-color: rgba(47, 117, 19, 0.3);
}
I was opening the modal popup when I click on the link using data-toggle="modal" attribute which was bound with that link and trying to close it using javascript but I was failed each time, so when I remove the "data-toggle" attribute and "href" from that link and opened it using javascript then it was closing properly using javascript as well.
from the below few lines of code, you can understand easily
Advanced Search
I changed the above link to something link this
Advanced Search
After that when I try to close it using javascript, then I become successful
$("#CustomerAdvancedModal").modal('hide');
I am also having the same problem, where I can't find the correct solution for it.
Later I observed that what is happening when the modal gets closed when it works well.
Three Main properties are,
modal-open class gets removed from <body> tag.
In <body> tag change CSS .
<div> class of modal-backdrop gets removed.
So, When u do these things manually, you will achieve it, when not works.
The code should be as following in Jquery,
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal-backdrop").remove();
$('#myModal').hide();
Hence, try this and get a solution.
Before you open a loading modal, make sure that you close all others.
This is the function is use to close the modal:
function hideLoadingModal() {
$('#loadingModal').on('shown.bs.modal', function () {
$('#loadingModal').modal('hide');
});
}
Now if I want to open the modal I call the above function and open a new one after that.
Like this:
hideLoadingModal();
$('#loadingModal').modal('show');
Hope this helps you.
Cheers
One possible reson should be the order of jquery and bootstrap and your script is not in proper sequence.
Below should be the sequence.
1. <script src='js/jquery-3.2.1.min.js'></script>
2. <script src='js/bootstrap.min.js'></script>
3. your own script:
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
Check if you closed all nested div inside main modal div
<div data-backdrop="static" class="modal fade" id="modal-progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-----NESTED DIV ------------------
</div>
None of the above solutions worked for me. If this is your case, try to imitate click event on the close button (the one which is added dynamically):
<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;">
<div class="modal-dialog modal-dialog-centered" role="document">
...
</div>
Close</div>
</div>
$('.close-modal').click() should resolve the issue.
Try this
give an id to close button
<button type="submit" id="modalcloseBtn" class="button primary" data-dismiss="modal" >Close</button>
and trigger onclick event
$('#modalcloseBtn').trigger("click");
G.modals = [];
/**
*
* #param {
* modalId: string,
* callback: function
* } options
* #returns
*/
const openModal = (options) => {
const {
modalId = false,
callback = () => { }
} = options;
if (!modalId) return;
const modalNode = document.querySelector(`#${modalId}`);
modal = new bootstrap.Modal(modalNode);
modal.show();
const modalObject = {
modal,
id: modalId
};
G.modals.push(modalObject);
callback();
};
/**
*
* #param {
* modalId: string,
* callback: function
* } options
* #returns
*/
const closeModal = (options) => {
const {
modalId = false,
callback = () => { }
} = options;
if (!modalId) return;
const currentModal = G.modals.find(item => item.id === modalId) || false;
if(!currentModal) return;
const { modal } = currentModal;
const { _element, _backdrop } = modal;
_element.classList.remove('show');
_backdrop._element.remove();
G.modals.splice(G.modals.indexOf(currentModal), 1);
callback();
};
openModal({
modalId: 'your-modal-id',
callback: () => {
DoSomethingAfterModalOpened();
}
});
closeModal({
modalId: 'your-modal-id',
callback: () => {
DoSomethingAfterModalClosed();
}
});
if nothing helps (that happens) - make sure that nobody prevents it like below (my case):
$modal.on('hide.bs.modal', function (e) {
if (shouldNotBeClosed) {
return e.preventDefault();
}
});
Same issue here for no reason, i'm not using "fade" stuff.
I open modal and close modal only with js, the hide function is working only when called inside a setTimeout.
<script>
var modal_show = function(){
$("#modal_post").modal("show");
};
var modal_hide = function(){
$("#modal_post").modal("hide");
};
window.addEventListener("message", function(event){
// listening iframe post message
modal_hide();
});
</script>
<div class="modal" id="modal_post" tabindex="-1" role="dialog" style="width: 100%;" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" style="width: 450px; height:600px; background: white; border: none; box-shadow: none;" role="document">
<div class="modal-content" style="width: 100%; background: white; border: none; box-shadow: none;">
<div class="modal-body" style="width: 100%; background: white; border: none; box-shadow: none; padding: 0;">
<div>
<iframe src="https://perdu.com" style="width:450px;height:600px;"></iframe>
</div>
</div>
</div>
</div>
</div>
For no reason, modal_hide(); is working inside the console but not in my code.
If i replace the modal_hide(); in the event listener with setTimeout(modal_hide, 200); it's working properly
its very easy.. Remove fade class :)
I am having some trouble with js inside my bs3 modals - it does not work. I am opening the modals with ajax.
main page
<i class="fa fa-plus-circle"></i> Activate this computer';
<div class="modal fade" id="modal-ajax" tabindex="-1" role="basic" aria-hidden="true">
<img src="/assets/img/ajax-modal-loading.gif" alt="" class="loading">
</div>
<script src="/assets/scripts/custom/custom.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
Custom.init();
});
</script>
custom.js
var Custom = function () {
// private functions & variables
// external window links
var externalWindows = function() {
$("a[data-window='external']").on('click', function() {
window.open($(this).attr('href'));
return false;
});
}
// public functions
return {
//main function
init: function () {
//initialize something here
externalWindows(); // external window links
}
};
}();
the link in the modal page
<a class="btn btn-primary" href="http://www.somesite.com/" data-window="external" onClick="$('#modal-ajax').modal('hide');"><i class="fa fa-shopping-cart"></i> Purchase Now</a>
All this does is open any link with data-window="external" in a new window in the browser. Since the modal page is opened with ajax the js from the main page doesn't 'pick it up' on load. I can add the function on my modal page as well, but then it causes issues with the main page.
What can I do here?
You can use event delegation so that the dynamically loaded links trigger your handler:
var externalWindows = function () {
function openWindow() {
window.open($(this).attr('href'));
return false;
}
$("a[data-window='external").click(openWindow);
$("#modal-ajax").on('click', "a[data-window='external']", openWindow);
};
In ASP.NET MVC, what is the preferred pattern for running Javascript on a partial view that is loaded via Ajax?
For example, suppose you need to wire up some click events in your partial view.
Of course, putting something like this in the partial view would not work, because the document ready event won't fire after the partial view is Ajax loaded.
<script type="text/javascript">
$(function() {
$("a.foo").click(function() {
foo();
return false;
});
});
</script>
I suppose something like this might work, but is it safe?
<script type="text/javascript">
$("a.foo").click(function() {
foo();
return false;
});
</script>
The pattern I have been using has been to run any Javascript from my parent view after loading the partial, like this:
$.get(url, function(html) {
$("#partialDiv").html(html);
// Now that the partial has loaded...
RegisterClicks();
});
But I've been working through this example, and noticed that they simply put their click registering code inline in the partial view.
Is this a generally safe pattern to adopt? How can I be sure that the DOM for the partial view has finished loading before my script runs?
The jQuery .on() function should do the trick, shouldn't it? It should work for dynamically added content.
Have this available as part of the full content
<script type="text/javascript">
$(function() {
$("#partialContent").on("click", "a.foo", function() {
foo();
return false;
});
});
</script>
<div id="partialContent">
Link 1
Link 2
<!-- More dynamic content -->
</div>
Scripts are not loaded on Partial view via partial view loaded by ajax in Asp.net MVc
<div class="modal fade" id="myEditCourseModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Update Data</h4>
</div>
<div class="modal-body" id="CourseEditPreview">
#Html.Action("CourseUpdatePartial", "AdminCourse")
</div>
</div>
</div>
</div>
<script type="text/javascript">
function OpenCourseEdit(currentId) {
$.ajax({
type: "Get",
url: '#Url.Action("CourseUpdatePartial", "AdminCourse")',
cache: false,
Async: true,
contentType: 'application/html;charset=utf-8',
dataType: "html",
data: { CourseID: currentId },
success: function (data) {
var content = $('#CourseEditPreview').html(data);
eval(content);
$('#myEditCourseModal').modal('show');
},
error: function (error) {
$("#LoadingPanel").css("display", "block");
$('#CourseEditPreview').html("");
}
})
}
</script>