I have bootstrap modal popup, in footer of modal popup there is one button
<button type="button" class="btn btn-primary submit">Submit</button>
when i click this button a confirmation is opened
$(".submit").on("click",function(event){
event.preventDefault();
if(confirm('Please confirm?')) {
$(".submit").removeClass('submit');
$(this).addClass('close_popup');
} else {
}
});
$(document).on('click','.close_popup',function(){
$('#default_modal').modal('hide');
});
i want if i click on submit button for the first time submit class should get removed and close_popup class should be added and on clicking for second time on close_popup class the modal should get closed. In my case confirmation popup is open and if i click on ok the modal is also getting closed.
Any Solution to fix this issue Thanks
Related
Been working for about 2 weeks to get a CRUD system working with knockout and it's slowly coming along. I keep hitting issues everytime I try to add buttons.
Currently my biggest issue at the moment is that my add button which is suppose to clear all values from my news and give me a blank form to fill in. Currently I have it loaded in a modal form using bootstrap. On my site the screen fades as if it's about to show you the modal DIV but nothing happens.
http://jsfiddle.net/rqwku4kb/3/
self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
self.currentIncident(null);
;
};
Would anyone have any ideas?
Use Knockout to control your modal, just like everything else. If you're reaching around the viewmodel to fiddle with the DOM, things will go wrong.
Twitter bootstrap 3 Modal with knockout
Modals will close when the background is clicked so you need to suppress that using one of two ways. Either prevent the closing of the modal due to a background click using bootstrap attributes as below:
Via javascript :
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
HTML:
<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">
Or alternatively suppress the background click event. When you click on the new button the click event fires for the button and then bubbles / propagates up through the DOM thus triggering a background click which in turn closes the dialog again.
So either suppress propagation in the handler:
self.AddNewIncident = function(data, ev) {
var id = this.ID;
$('#myModal').modal('show');
self.currentIncident(null);
ev.stopPropagation();
};
or in the click binding such that knockout will do this for you:
<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>
When a button clicked it shows a modal box. That modal box contains two buttons. OK and Cancel button. When we click on the OK button it shows an alert message box, up to this I got correctly. But I want to disable the modal box when an alert message pop up. I tried lot of methods like
$("modalFileStruct").('disabled', true);
$("#modalFileStruct").fadeOut("slow");
$("#modalFileStruct").addClass("fade");
$("#modalFileStruct").setFocusable(true)
$("#modalFileStruct").css('style','background-color: #000; opacity:1; z-index:1000;');
document.getElementById("modalFileStruct").removeAttribute("tabIndex");
$('#fileStruct').blur();
$("#modalFileStruct").css("position","relative","z-index","99");
$('#modalFileStruct').fadeIn('slow');
$('#modalFileStruct').fadeOut('slow');
But it doesn't satisfy my need. Could anyone help me?
This is my code
$("#modalFileStruct").modal();//This is pop up the modal box
//This is the click function of OK button inside the modal box
function fileInfoClicked(){
alertMessage('Error',"Attribute name contains special characters: " + inps[i],
'error');
return;
}
//Code for alert message box
function alertMessage(title, message, type) {
$.msgBox({
title : title,
content : message,
type : type,
modal : true
});
}
$("#modalFileStruct").modal();//This is pop up the modal box
//This is the click function of OK button inside the modal box
function fileInfoClicked(){
$("#modalFileStruct").modal("toggle");
}
I guess you want the user to force to click OK button instead of closing the modal when user clicks on page. by the way which plugin are you using? In Bootstrap use data-backdrop="static"
I have an angular-ui modal window, and, obviously, when I click outside the modal(backdrop) the modal closes.
However, I would like to change this behavior, for example, when I click on the backdrop, the popup window shows up with 2 buttons (OK and Cancel) and the modal will NOT close on Cancel.
The popup phase is easy, but I am not sure how to stop the modal from closing.
Could anybody help me with this, please? Thanks a lot!
As Hurix mentioned, Give
backdrop : 'static'
in your modal options which will not close the modal window when backdrop is closed.
Then apply a click event on backdrop:
$('.modal-backdrop').on('click', function(){
if (confirm('close modal') == true){
//dismiss your modal instance
} else {
//return
}
});
This click function will give a confirmation popup with ok and cancel button and you can handle whatever you want to do when they are clicked.
Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.
Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});
Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/
I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>
Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});