2
0
mirror of https://github.com/inventree/InvenTree.git synced 2025-07-02 11:40:58 +00:00

Fixed position header + footer for modals

- Fun with CSS!
- Header title provided by AJAX data
- Footer static
- Submit button text can be customized via JSON dat
This commit is contained in:
Oliver
2018-04-26 22:38:48 +10:00
parent 8c9442193b
commit b4ff8f79f0
5 changed files with 51 additions and 35 deletions

View File

@ -40,7 +40,12 @@
overflow: hidden;
}
.modal-content {
.modal-content h3 {
margin-top: 3px;
margin-bottom: 3px;
}
.modal-form-content {
border-radius: 0;
position:relative;
height: auto !important;

View File

@ -1,7 +1,17 @@
function attachSelect(modal) {
// Attach to any 'select' inputs on the modal
// Provide search filtering of dropdown items
$(modal + ' .select').select2({
dropdownParent: $(modal),
dropdownAutoWidth: true,
});
}
function launchModalForm(modal, url, data) {
$(modal).on('shown.bs.modal', function () {
$(modal + ' .modal-content').scrollTop(0); // animate({ scrollTop: 0 }, 'fast');
$(modal + ' .modal-form-content').scrollTop(0);
});
$.ajax({
@ -13,15 +23,17 @@ function launchModalForm(modal, url, data) {
$(modal).modal('show');
},
success: function(response) {
if (response.title) {
$(modal + ' #modal-title').html(response.title);
}
if (response.submit_text) {
$(modal + ' #modal-form-submit').html(response.submit_text);
}
if (response.html_form) {
var target = modal + ' .modal-content';
var target = modal + ' .modal-form-content';
$(target).html(response.html_form);
var select = modal + ' .select';
$(select).select2({
dropdownParent: $(modal),
dropdownAutoWidth: true
});
attachSelect(modal);
} else {
alert('JSON response missing form data');
@ -34,8 +46,10 @@ function launchModalForm(modal, url, data) {
}
});
$(modal).on('submit', '.js-modal-form', function() {
var form = $(this);
$(modal).on('click', '#modal-form-submit', function() {
// Extract the form from the modal dialog
var form = $(modal).find(".js-modal-form");
$.ajax({
url: url,
@ -48,14 +62,10 @@ function launchModalForm(modal, url, data) {
$(modal).modal('hide');
}
else if (response.html_form) {
var target = modal + ' .modal-content';
var target = modal + ' .modal-form-content';
$(target).html(response.html_form);
var select = modal + ' .select';
$(select).select2({
dropdownParent: $(modal),
dropdownAutoWidth: true
});
attachSelect(modal);
}
else {
alert('JSON response missing form data');