few open modals

[epexa]

if the window is already open, the second one can not be opened.

code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">

<div class="modal" id="first-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				First modal
			</div>
		</div>
	</div>
</div>

<div class="modal" id="second-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				Second modal
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.23/dist/bootstrap-native-v4.js"></script>
<script>
new Modal(document.getElementById('first-modal')).show();

setTimeout(function() {
	new Modal(document.getElementById('second-modal')).show();
}, 3000);
</script>

error:

bootstrap-native-v4.js:1125 Uncaught TypeError: Cannot read property 'Modal' of undefined
    at Modal.show (bootstrap-native-v4.js:1125)
    at boostrap_native.html:28

gist
live example

in Bootstrap.js (not native, with jQuery) all ok!
gist
live example

[thednp]

All I can say is that perhaps you expect the script to behave exactly like jQuery, so I would suggest using this instead:

var firstModal = new Modal(document.getElementById('first-modal'));
var secondModal = new Modal(document.getElementById('second-modal'));

firstModal.show();

setTimeout(function() {
  secondModal.show();
}, 3000);

[epexa]

@thednp use a variable or not, it does not matter.
please try, this does not work.

[thednp]

Yeah. I don't understand why this has to happen after 3s, I also don't know why setTimeout is messing up the order of the code execution (because if you get rid of it the problem goes away, basically it's inconsistent).

At this point this is the solution for you: close the current opened modal before initializing the second. The code looks like this now:

var firstModal = new Modal(document.getElementById('first-modal'));
var secondModal = new Modal(document.getElementById('second-modal'));

firstModal.show();

setTimeout(function() {
  firstModal.hide();
  secondModal.show();
}, 3000);

... and solves the issue with setTimeout so we can close this out.

[epexa]

@thednp
you did not understand my problem, I need to call several modals at the same time, and then close them in turn.
for example, the form of the add is in the modal, and when you save it, the form of the authorization opens in the modal.
please open boostrap example.

[thednp]

You gave me an issue with an example, I gave you a solution, it's case closed for me. In most cases you need to learn and adapt to the code.

[epexa]

@thednp
the problem is that you can open an infinite number of modals in boostrap, they open on top of each other and then they can be closed in turn.

in your wonderful implementation (bootstrap.native) of this can not be done...
this is often necessary, two simple examples:

1. open the form adding new data in the modal and after fill at save, opens authorization the form in the modal over the form adding modal;
2. open the form adding new data in the modal and for image upload opens upload the modal.

please open example.

[midzer]

@epexa Why you want to open a modal within a modal? I think this is not a good user experience anyway

[thednp]

Hey @epexa

Please check the first demo, you can open a modal from inside another modal, this is what you might not know it to be possible. It basically allows you to create a "setup wizard" like functionality, just with the current code.

For your issue, we're talking about a very specific use case here that can only be worked around easily just by following the script behavior. We don't want to change the scripting to accommodate just this use case.

We also don't have the "modal on top of another modal" functionality/demo/example with the original jQuery plugin, so why bother?

I coded something that is simple, effective, cross-browser supported, able to do a couple of things:

• open modal on button click or via JavaScript methods
• close modal on close button click or the modal overlay
• close any currently opened modal when opening a new one
• provides keyboard navigation
• comes with some accessibility features like aria and focusing proper elements on modal show/close
• provides support for the original custom events
• provides similar public methods for implementing advanced functionality
• uses properly the transitionend event (with fallback for legacy browsers) to make it work just like the original jQuery plugin
• the entire component scripting is very very consistent

For 99% of us, this is more than enough, we don't need to change the code for one use case, your case. I can imagine what kind of hacks would be required for this functionality to work.

We're 100% not interested in implementing such change, so if you ONLY cannot work your issue with the current code, feel free to fork it and make it your way, it's perfectly acceptable for anyone.