This question already has answers here:
Disallow Twitter Bootstrap modal window from closing
(27 answers)
Closed 3 years ago.
I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How could I achieve this scenario?
If using JavaScript then:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
in case of 'show'
$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');
or in HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
You can Use Direct in bootstrap model also.
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
Just add data-backdrop="static" and data-keyboard="false" attributes to that modal.
Eg.
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>
simply add data-backdrop and data-keyboard attribute to your button on which model is open.
You can use the code below
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
to change the default behavior.
$('#modal').modal({backdrop: 'static', keyboard: false}, 'show');
I use these attributes and it works, data-keyboard="false" data-backdrop="static"
This code will prevent the modal from closing if you click outside the modal.
$(document).ready(function () {
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
});
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
The following script worked for me:
// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
If you need disable clicking outside but enable pressing escape
$('#myModal').modal({
backdrop: 'static', // This disable for click outside event
keyboard: true // This for keyboard event
})
If you need to setup this after the modal is shown, you can use #Nabid solution. However, sometimes you still need to allow some method to close the modal. Assuming you have a button with class really-close-the-modal, which should really close the modal, you can use this code (jquery):
var closeButtonClicked = false;
$('.really-close-the-modal').on('click', function () {
closeButtonClicked = true;
});
$('#myModal').on('hide.bs.modal', function (e) {
if (!closeButtonClicked) {
e.preventDefault();
e.stopPropagation();
return false;
}
closeButtonClicked = false;
});
This isn't really nice code design, but it helped me in a situation where the modal was shown with a loader animation, until an ajax request returned, and only then could I know if the modal needed to be configured to prevent "implicit" closing. You can use a similar design to prevent closing the modal while it's still loading.
You should use backdrop static , keyboard false. and can use close button off by using jQuery or can remove from modal html. Hope this help.
$('#MyModal').modal({ backdrop: 'static', keyboard: false });
$('#MyModal .close').css('display','none');
Your code is working when i click out side the modal, but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed.
Click here
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
i think this codepen can help you
prevent modal close css and bootstrap
Related
i have a modal which has a select2 component, but its not working as it should, the search box is like disabled
<div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
this my code for my modal
$('#m_modal_1').on('shown.bs.modal', function () {
$('#id_golongan').select2({
placeholder: "Pilih Golongan"
})
});
this my JS
i have got rid of tabindex="-1" and used $.fn.modal.Constructor.prototype.enforceFocus = function() {}; but not working, if i used dropdownParent: $("#modal_penguasaan") modal disappears when i click
what can i do so that the modal doesn't disappear when i click select2 and the search box works normally
Ive seen a few examples but none that meet my requirements. I have a field called "Empno" on a form with a lookup button. I want to show a modal dialog search form to populate it. The modal itself has search fields such as company, employee name, and cost center. These modal fields are used to limit results. to get the result they click a submit button which causes a postback where the data is returned from a DB and then displayed in a table. The table has a "Select" button. I want the modal to remain open on its trip to the database and only close then the user presses select or close. I used to be able to achieve this with scriptmanager which is not available. I am using bootstrap 5.1 in a razor project on AspNetCore 5.x.
The modal needs return the company and empno(employee number) of the row which "Select" is pressed. I have the following which does work to display the webpage in a modal.
<button id="btnEmpSearch" class="btn btn-dark" data-toggle="ajax-modal" data-bs-target="#modalEmployeeSearchForm" title="Search" data-url="#Url.Page("ModalContent")"><i class="fas fa-search"></i>Search</button>
<input type="hidden" id="hfDisplayModal" asp-for="DisplayModal" />
#*Modal search forms*#
<!-- Modal -->
<div class="modal fade" id="modalEmployeeSearchForm" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modelTitle">Employee Search</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- pagfe will be placed here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
#section scripts {
<partial name="_ValidationScriptsPartial" />
<script type="text/javascript">
$(function () {
$('button[data-toggle="ajax-modal"]').click(function (event) {
/*alert('button clicked');*/
event.preventDefault();//dont close when clicking search button
// url to Razor Pages handler which returns modal HTML(data-url)
var url = $(this).data('url');
$.get(url).done(function (data) {
// append HTML to document, find modal and show it
$("#modalEmployeeSearchForm").find(".modal-body").append(data);
$("#modalEmployeeSearchForm").modal({ "backdrop": "static", keyboard: false });
$("#modalEmployeeSearchForm").modal('show');
});
});
});
</script>
}
I have this partially figured out. I changed my modal as follows (Added Iframe):
Employee Search
Cancel
And I changed my script as follows:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
/*Prevent postback on btnEmpSearch button click*/
$("#btnEmpSearch").click(function (event) {
event.preventDefault();
});
/*Show modal Dialog and load URL in it*/
$('button[data-toggle="ajax-modal"]').click(function (event) {
/*url to Razor Pages handler which returns modal HTML(data-url)*/
var url = $(this).data('url');
$.get(url).done(function (data) {
// append HTML to document, find modal and show it
/* $("#modalEmployeeSearchForm").find(".modal-body").append(data);*/
$("#RemoteContentFrame").attr("src", url);
$("#modalEmployeeSearchForm").modal({ "backdrop": "static", keyboard: false });
$("#modalEmployeeSearchForm").modal('show');
/*$("#modalEmployeeSearchForm").find("#searchEmployee").preventDefault();*/
});
});
});
</script>
}
Now I just need to figure out how to pass the selected employee number and company
I want to make my popover not dissmisive on content click while using focus trigger, because I have input inside in it.
Here are my div attributes:
data-toggle="popover" data-content="<input type='text' class='form-control'><button class='btn btn-sm btn-default' style='margin-top:5px'>Zapisz</button>" data-title="Description" data-html="true" data-trigger="focus" data-container="body"
So as you can see I have simple popover which is triggered with focus ( I know that it may be the issue why it is closing on click) but I have to close popover on click somewhere else on the screen that's why I'm using the trigger="focus".
You can add a listener (hide.bs.popover) to the popover and prevent execution of the event. In this case you need to add further listener to manually close it on button click. Something like this should work.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({html: true});
$("[data-toggle='popover']").on('hide.bs.popover', function(e){
e.preventDefault();
});
$("[data-toggle='popover']").on('shown.bs.popover', function(e)
{
// create your own listener after popover has shown
$("#your_button").on('click', function(e){
$("[data-toggle='popover']").off('hide.bs.popover');
$("[data-toggle='popover']").popover('hide');
});
});
});
</script>
I hope it helps.
I'm following this angular recipes page for adding a modal dialog to my ui. It suggests the following markup, which I've added to one of my views.
... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
... etc, from the recipe doc
</div>
What I want to see is my view, plus an "Open Modal" button on the bottom and nothing else. What I see instead is the button and the content of the modal already visible on the page.
The very next words in the recipe doc are:
Note that even though we don’t specify it explicitly the modal dialog
is hidden initially via the modal attribute. The controller only
handles the button click and the showModal value used by the modal
attribute.
Why is my modal mark up initially visible on the page? I think I have installed angular-ui properly... in my index.html:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
And in my app JS:
angular.module('MonteAdmin', [
...
'ui.bootstrap',
...
])
That recipes page is likely out of date. At the time of the writing it might have been possible to pass a variable showModal to the modal directive to reveal or hide it. In your controller, you would have been able to show the modal by setting the scope variable showModal to true or false:
$scope.showModal = false;
$scope.open = function() {
$scope.showModal = true;
}
The current version does not work that way. You will have much better experience if you read the official documentation for the library at Angular UI Bootstrap
If you are using the latest version of the library, the directive is no longer modal but uib-modal. In addition, you have a bit more work to do to implement your modal.
Modal markup should be in a script tag, with a type set to text/ng-template as per the official example:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
To actually open the modal, your button click should trigger the following example function:
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
You must also define a controller for the modal, itself:
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
All of this code is found on the official documentation for Angular UI Bootstrap
I am trying to set the focus of an input field inside my form when I reveal a modal using ZURB Foundation framework. I am really truly sorry if this question has been asked before I've been having problems finding a solution to this for a while.
This is what I have:
<div id="myModal" class="reveal-modal" data-reveal>
<form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
<label for="curse">Пиши си овде:</label>
<textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
<input type="submit" name="submit" class="button secondary tiny right" value="OK">
</form>
<a class="close-reveal-modal">×</a>
</div>
Everytime I click a button this modal pops up and I want my input field (textarea) to be in focus when I do that. I tried adding the autofocus attribute and I also tried using javascript to set the focus when I click the button or when this div shows or loads (onshow and onload methods). Nothing seems to work for me so any help will be much appreciated.
I think you'll have to use JS or jQuery to handle the opened event like this..
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
modal.find('[autofocus]').focus();
});
Demo: http://codeply.com/go/Ahs4oZDsWn
With Foundation 6 the event name has changed:
$(document).on('open.zf.reveal', '[data-reveal]', function () {
console.log('asdfasdfsadf')
var modal = $(this);
modal.find('[autofocus]').focus();
});