Hello i have many card which open mini modal windows . Teleport move content to DIV in body tag.
<Teleport to="#root">
<Modal v-if="open">
<Content></Content>
</Modal>
</Teleport>
Problem what if i open from last card then first - last modal is under the first!
How can I set up Teleport so that the last open window will always at the top?
Related
When im opening the modal, it transition without problems, but when hiding the modal, it doesnt transition out again - It just disappears.
I have the inside the modal (Worked in Vue2), but that seems to be a problem... If I move the component outside to the parent component and wrap the component in the transition it works, but it seems like it's not possible to have the component inside the component? Any ideas ?
See a Codesandbox here: https://codesandbox.io/s/ancient-cookies-rdm3w?file=/src/components/Modal.vue
Move the transition tag into the parent, wrapping the component. If you wrap the transition on the modal / child component itself, the component will be unmounted when you click the close modal button, and the animation won't have time to run.
<transition name="modal" :appear="true">
<Modal v-if="showModal" #close-modal="showModal = false" />
</transition>
I made modal component using v-show options live below.
<registerModal v-show="register.etcCompanyVisible" />
Thus, when register.etcCompanyVisible is true, this modal appears.
And this modal has some input like this.
<input type="text" v-model="etcCompanyName" placeholder="name" autofocus />
When this modal is opened at first time, the autofocus works well.
And then, this modal can be closed with cancel button by changing register.etcComapnyVisible to false.
<button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>
When I open modal again, the autofocus doesn't work. I think it needs some reset option for this modal, but I don't know how it can be done.
Could you give me some recommendation? Thank you so much for reading.
My understanding is that the autofocus attribute is only reliable on page load, so you need to handle the focus event yourself.
The easiest way to do this is to put a ref on your input.
<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>
Then when you launch your modal, maybe you are using a button, call the focus on that $ref.
<template>
...
<button #click="focusInput">launch modal</button>
...
</template>
<script>
...
methods:{
foucusInput() {
this.$refs.companyName.focus();
}
}
Note that you could use the same method to dynamically focus inputs in a certain order. Here is a fiddle demonstrating that using button clicks but you could easily use this to move from one input to the next automatically after a certain condition is met.
I have just one element that triggers a popover, and another element that closes it. If the popover is closed by this another element, then the next time I click the trigger, the popover won't show. I have to click it twice in order to see it opening.
I'm using Bootstrap v3.3.6 (latest version today). If I use previous versions of Bootstrap (i.e., v3.0.2), it works fine. Another questions in SO that solve this issue are using older versions of Bootstrap.
An example that illustrates this issue (in Codepen):
HTML:
<button class="btn btn-default" data-toggle="popover" data-content="This is a popover">
Toggle popover
</button>
<button class="cpo btn btn-danger">
Close popover
</button>
JS
$('[data-toggle="popover"]').popover();
$(".cpo").on("click", function(e) {
e.preventDefault();
$('[data-toggle="popover"]').popover('hide');
});
It's a known bug, with a fix pending of revision: github
When I'm using bootstrap 3 modal when I dismiss it the page reloads and /?is added to location string. How can I just dismiss and hide modal without page reload?
Your button that closes the modal will need to have the data-dismiss attribute and it should be equal to "modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
This code is straight from the Bootstrap website (http://getbootstrap.com/javascript/#modals)
I am using bootstrap modal for showing modal window. For modal body I am using iframe so that if I submit form I can get response on the same modal window.
My iframe is like :
<div class="embed-responsive embed-responsive-4by3">
<iframe seamless="seamless" class="embed-responsive-item" src="schedule"></iframe>
</div>
I am using ClockPicker plugin to pick the time. But when Clock Picker appears it hides behind the scroll. I have changed z-Index of clock picker but it doesn't seem to work.
Any help ?