Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't hide modal before it is "shown?"

See original GitHub issue

In Bootstrap 5, calling Modal.hide() has no effect until modal is “shown” (it works as expected if the fade css class is removed).

Suppose you have list of items and a single modal. When you click on each item, details about that item are shown in the modal, but you accidentally clicked the wrong item, so you want to quickly cancel by clicking the backdrop while it’s fading in. Currently you cannot do that. You have to wait until the wrong item is shown to you before you can close it.

Is there a way around this?

Maybe there should be an optional parameter, Modal.hide(force=true).

Without proposed fix: https://jsfiddle.net/o7wdt6r5/ With proposed fix: https://jsfiddle.net/fgyuerLo/

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Modal Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<style>
		.show {
			 transition: opacity 100ms;
		}
		.hide {
			 transition: opacity 10ms;
		}
	</style>

</head>
<body>

	<p>
		Click a button and quickly try to cancel the modal by clicking the backdrop.
	</p>

	<!-- Buttons -->
	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 1">
		Item # 1
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 2">
		Item # 2
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 3">
		Item # 3
	</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					...
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
			keyboard: false
		})

		$('.item-button').click(function(){
			$('#myModal').find('.modal-body').text($(this).data('item-info'))
			myModal.show();
		})

		$('.modal').click(function(e){
			if(!$(e.target).hasClass("modal-body")){
				console.log('Clicked modal backdrop, calling .hide()...')
				myModal.hide();
			}
		})

	</script>

</body>
</html>

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:8 (6 by maintainers)

Top GitHub Comments

2reactions

alpadevcommented, Jun 15, 2021

But it is related to #33727 . Right?

Yes, somewhat. The problem is a bit different but it got something to do with transitions being asynchronous and methods are called in a synchronous way. IMO, we would need to implement some way of cancelling transitions or to automatically queue code that is called during the component being busy.

1reaction

binseqcommented, Jun 12, 2021

Here is the OPs code with his fix from #34232 applied https://jsfiddle.net/z6p0oujt/. IMO the improvement from the that fix is negligible as it requires a certain timing to make use of the change at all. (You have to wait for the backdrop before you click and it saves you some ms that is needed to fully show the modal.)

If it happens on a frequent basis, one can simply remove the fade class so it wouldn’t be a problem at all.

It took me a while to figure out why the demo I posted wasn’t working with the updated fix, then I realized a small change to the CSS was required for it to work. Try it now: https://jsfiddle.net/fgyuerLo/

Also, this was just a simple demo of one use case, least complex example that could think of. The reason I need hide to respond instantly is I want to hide the modal when user navigates back in the browser. I do that by modifying the URL (with pushState) with a special marker to indicate that .show() has been called. For example, pushState CURRENT_URL + #modal. Then I listen for popstate event and examine the url. If the #modal hash is missing, then I know the user navigated back so I call .hide(). Now the problem is if user navigates back before hide() is ready to respond, the browser is already on CURRENT_URL but modal is still showing. Now if user navigates back again, the browser is back two pages.

In the case that user closes modal in the normal way (other than back navigation) I call history.go(-1) and hide() so the the user is back at CURRENT_URL and ideally now modal is also hidden.