If in bootstrap modal dialog change class definition it is not closed

Hello,
In laravel 5, jquery 3, bootstrap 4.4, blade app I use modal dialogs with methods like for opening :

...
$("#div_check_in_storage_space_modal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
...

Code (JavaScript):

and closing

bookingsAndAvailability.prototype.cancelAddNewClient = function () {
console.log('?? cancelAddNewClient::')
$("#div_check_in_storage_space_modal").modal('hide');
...

Code (JavaScript):

and in blade template :

<div class="modal fade" tabindex="-1" role="dialog" id="div_check_in_storage_space_modal" aria-labelledby="check_in_storage_space_modal_label"
aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title" id="check_in_storage_space_modal_label">
TITLE
</h4>
<button type="button" class="close" onclick="javascript:bookingsAndAvailability.cancelAddNewClient()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
BODY

HTML:

All modal- classes have fixed width and it works ok.
But for one of my dialog I need to have more width for opened modal dialog and I remade my blade teplate :

<div class="modal fade" tabindex="-1" role="dialog" id="div_check_in_storage_space_modal" aria-labelledby="check_in_storage_space_modal_label"
aria-hidden="true">

<div class="modal-dialog-full-width" role="document">

<div class="modal-content-full-width">

<div class="modal-header-full-width">
TITLE
</div>

<div class="modal-body-full-width">
BODY

HTML:

and in my scss file I defined more wiwdth for all -full-width classes, but with that
code in cancelAddNewClient does not any more and dialog is not closed

looks like

$("#div_check_in_storage_space_modal").modal('hide');

Code (JavaScript):

stops working with -full-width defined in modal.
How can I fix it ?

Thanks!

 

This is 2020, not 2002. Modal dialogs -- at least their base functionality -- is NONE of JavaScript's flipping business.

Though your REAL problem here are the monuments to developer ignorance, incompetence, and ineptitude that are these stupid malfing frameworks.

Why? Because they have you using JavaScript for things that aren't JS' business, in a manner that breaks accessibility and usability (in a way that could land you in court depending on the site), writing many times more code than you need, whilst apparently not learning how to even write HTML properly.

Like how DIV can't be focused so it doesn't even HAVE at tab index, using DIV + class to probably do H2's job, having multiple instances of a width wrapping class for christmas only knows what... end result being a train wreck laundry list of how NOT to write HTML or CSS.

Kick all that mental midgetry that's making you write two to ten times the HTML needed, using JavaScript for things that's none of JS' business, and so forth to the curb. Then:

<div class="modal" id="sample">
	<a href="#" class="modalClose"></a>
	<section>
		<h2>
			<a href="#" class="modalClose"></a>
			Title
		</h2>
		<p>Content</p>
	</section>
<!-- #sample.modal --></div>

Code (markup):

For the markup, and then:

.modalFix,
.modal, 
.modal > .modalClose {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
}

.modal .modalClose {
	text-decoration:none;
}

.modal {
	overflow:auto;
	position:fixed;
	display:flex;
	padding:1em;
	left:-100%;
	background:rgba(224,224,224,0.9);
	box-shadow:
		inset 0 0 128px 128px rgba(0,0,0,0.1);
	opacity:0;
	transition:left 0s 0.5s, opacity 0.5s;
}

.modal:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s;
}

.modal section {
	overflow:hidden;
	position:relative;
	top:-50vh;
	margin:auto;
	background:#FFF;
	border:1px solid #777;
	border-radius:0.25em;
	box-shadow:
		0 0.25em 0.75em rgba(0,0,0,0.2);
	transition:top 0.5s;
}

.modal:target section {
	top:0;
}

.modal h2 {
	position:relative;
	padding:0.33em 0.66em;
	margin-bottom:0.66em;
	background:#CCC;
	border-bottom:1px solid rgba(0,0,0,0.7);
}

.modal h2 .modalClose {
	float:right;
	font-size:1.2em;
	line-height:1.2em;
	color:#000;
}

.modal h2 .modalClose:before {
	content:"\01F5D9";
	vertical-align:bottom;
}

Code (markup):

99% of the modal functionality complete without a lick of scripting. JS could then enhance it further by adding a hook for the escape key to close it. Quality JavaScript ENHANCES an already working page, instead of being the only means of functionality. Hence why bootcrap's asshat use of JS for mobile menus is utter trash.

(function(d) {
	d.body.addEventListener('keydown', function(e) {
		if (
			(e.keyCode == 27) &&
			(location.hash.length > 1)
		) {
			var target = d.getElementById(location.hash.substr(1));
			if (target && (target.className == 'modal')) {
				location.hash = '#';
			}
		}
	}, false);
})(document);

Code (markup):

All in a nice little IIFE so it's invisible to all your other code, not a lick of "Framework" BS needed.

The only thing needed to open the modal is <a href="#modalId">Open Modal</a> where modalId is the Id of said modal. If you "have" to trigger it with JavaScript telling large swaths of users to go **** themselves, just assign location.hash.

Live demo here:
https://cutcodedown.com/for_others/mstdmstd/modals/

I tossed a login modal in there as well so you can see it working. It starts out as flex so it shrinks to content, but you can easily set a min-width or max-width via the ID. For example the #login modal on that page is set to collapse, but the #sample one gets:

#sample section {
	width:100%;
	max-width:24em;
}

Code (markup):

So it fills screen width to a maximum of 24em. Just target the section tag inside the associated ID with whatever widths you want.

Bootcrap and jQuery -- like all of these other mentally challenged "frameworks" -- are just making you work harder, not smarter, and in the process telling users with accessibility needs to go plow themselves. Anyone telling you otherwise doesn't know enough about HTML or CSS to be flapping their bloody yap on the topic. All they do is provide you with broken nonsensical bloated examples of how NOT to do things. EVERY blasted claim about them being "easier" or "better for collaboration" and so forth is a BALD FACED LIE!

STOP slopping classes onto everything, STOP using classes for presentation and instead say what things ARE, and STOP using non-semantic markup!