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)
Related
I have a modal that is being imported and added to a page as a component. The modal is called into the page as
<TwoFactorStatus v-show="showTwoFactoreModal"></TwoFactorStatus>
Then a button has a click event as such
<button class="btn btn-danger pull-right" #click="ShowTwoFactoreModal()" type="danger">Disable two-factor authentication</button>
Which then calls a method to
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
}
The Modal looks like so
<template>
<div class="modal fade" id="showTwoFactoreModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
Two Factor Switch Off
</div>
<div class="modal-body">
<p>This modal must pass</p>
</div>
</div>
</div>
</div>
</template>
Change your ShowTwoFactoreModal function to something like this:
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
$('#showTwoFactoreModal').modal('show');
}
Either that or maybe using :class bindings and appending the active class, but this is more straight. I usually do it with an eventBus, but it might be overkill for your project... if you were to do it with an event bus, you could attach an eventListener to the modal component, and attach a showModal function callback to that listener where you don't need to set IDs you can just call it like: $(this.$el).modal('show'); ... but thats another story...
Bootstrap modal is using its own js functions to handle show and hide modal. Vue v-show can only show and hide the components which you programmed its logic. But bootstrap modal is showing and hiding by appending class to modal component.
If you want to use without bootstrap.js to toggle you can use jQuery with Vue as below. (if just want show then change method .show())
//200 is duration of fade animation.
<button #click="toggleModal"></button>
function toggleModal() {
$('#your_modal_id').fadeToggle(200)
}
If you want to use bootstrap own modal with their js then you can copy and paste modal code
here. https://getbootstrap.com/docs/4.0/components/modal/
If you want Vue v-show to handle all process then write logic to do it. If need help just ask.
When I apply this example which display a button popover on hover (mouseenter) and hide it when not hovered (mouseleave), the popover display also when the button is clicked, and stay visible until the button is clicked a second time...
<button
type="button"
[popover]="popover"
placement="bottom"
triggers="mouseenter:mouseleave"
class="btn"
[ngClass]="btnClass"
></button>
The code above show the popover under the button when hovered, but also on the top of the button when clicked...
Is this a normal behaviour ?
Ngx-bootrap button don't like when an input is named popover, so replacing this by the following code works:
<button
type="button"
[popover]="anyThingButPopoverNamedVar"
placement="bottom"
triggers="mouseenter:mouseleave"
class="btn"
[ngClass]="btnClass"
></button>
When using https://wave.webaim.org/ to check a page for accessibility It detects (3) red errors. seems this is all coming from colorbox jquery.colorbox.min.js
3x empty button
<button type="button" id="cboxPrevious">
<button type="button" id="cboxNext">
<button id="cboxSlideshow">
How can this be repaired? I know that the button type should be Some Content
Not
I had the same problem as you.. All I did was to disable a plugin called Yith compare..
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
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}