I am trying to create a modal dialog in Vue. When the dialog is open, I want the page scrolling to be disabled but the user should still be able to scroll the dialog, and I was trying to achieve this with preventDefault. My component looks like this:
<!--Modal.vue-->
<template>
<div v-show="open" class="modal" #scroll.stop.prevent #wheel.stop.prevent>
<div class="mask"></div>
<div class="overlay">
<div class="dialog">
<button #click="$emit('close')">CLOSE</button>
<Paragraphs />
</div>
</div>
</div>
</template>
<script>
import Paragraphs from "./Paragraphs";
export default {
components: {
Paragraphs,
},
props: {
open: Boolean,
},
};
</script>
<!--some scoped CSS here-->
Full working example on the sandbox https://codesandbox.io/s/optimistic-pond-3zrxsf
The problem is that while this arrangement is preventing page scrolling, it is also freezing scrolling on the dialog itself, which I don't want. And apparently stopPropagation only prevents bubbling up, but not down the DOM tree, so that isn't helping either. What can I do to achieve this?
Note: I do not want to set the overflow-y property of the body tag as that takes away the scrollbars completely and has a jittery effect of everything shifting to the side by a few pixels when the dialog is opened or closed.
Related
What do I want?
I want to destroy Modals containing my Angular components to be closed and destroyed so it does produce side-effects when I am changing routes (For example using the browser back button).
Actual Results
When changing routes using my app's Navbar, either the Modal stays in the DOM and I am not able to scroll anything on the screen or The Modal simply does not close.
Artifacts such as which should be removed when we close the modal are still present.
I have tried using
UIkit.modal(myModalId).$destroy(true) to remove the modal from dom.
Jquery $(modalId).remove(); Modal removed from DOM but when we go back to the modal page, the Buttons are not triggering the modals.
My Code
Button that Opens Modal
<button uk-toggle="target: #myModalId">Open Modal</button>
Modal template
<div id="myModalId" class="uk-flex-top acc-modal" uk-modal="esc-close: false; bg-close: false; stacked: true; cls-page: 'acc-modal-page';">
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" style="width: 431.6px !important; ">
<button class="uk-modal-close-default uk-close-large" type="button" id="close-event" uk-close></button>
<h2 class="uk-modal-title">
Modal Title</h2>
<My-Child-Component (newItemEvent)="updateDataAfterChild($event)" #MyChildComponent></My-Child-Component>
</div>
</div>
Hide and Destroy modal when route component destroys.
destroyModal(modalId: string){
const modal = uikit.modal(modalId);
modal.hide();
modal.$destroy(true);
}
ngOnDestroy(){
try{
this.destroyModal('#'+myModalId);
}catch(err){
console.log(err);
}
}
Use routerLink and <router-outlet></router-outlet>.
You can do something like this.
<button mat-flat-button color="primary" routerLink="/login">Login</button>
<button mat-flat-button color="primary" routerLink="/signup">Signup</button>
<router-outlet></router-outlet>
Your Components will show in place of <router-outlet></router-outlet> and they will destroy previous component. [Source]
Thoughts:
I believe this way of routing is done because of the 'nature' of the Single Page Applications.
So I'm trying to collapse a sidebar which I have stored as an angular element. I've tried using the toggle script in the template URL and in my page code but neither are doing it. On every other page of the site, I still have the sidebar in non-angular form and it is collapsing without a problem.
heres the problem
plunkr
<div ng-app="appHeaderApp">
<div ng-controller="sidebarcon">
<div ng-repeat="stab in mySideTabs">
<app-sidebar info="stab"></app-sidebar>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
The short answer for this is that you are not using Angular correctly. If you're using Angular, do things the Angular way :)
After inspecting your website, it looks like you are using a directive for the sidebar. The collapsing functionality is being controlled by the "toggled" class, so we can use ng-class to toggle this.
So we can do something like:
<div ng-class="{toggled: toggled}"></div>
This conditionally applies a class. Then in your button that toggles the sidebar, you can do something like:
<button ng-click="toggled = !toggled">Toggle Sidebar</button>
This button will toggled the "toggled" boolean back and forth, which will toggle the class on the sidebar.
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>
I have a Twitter Typeahead inside of a Semantic UI modal. The desired behavior is that the user can select something from the typeahead and still work within the modal before confirming their selection. However, if the user clicks on a selection, then the modal closes early. This only occurs when clicking; if the user uses the arrow keys to select an option, or uses Tab to complete, then the modal stays open as desired.
I've made a JSFiddle to demonstrate the problem. Minimal code summary below:
index.html:
<div id="pick-user-modal" class="ui modal"><i class="close icon"></i>
<div class="header">Select user</div>
<div class="content">
<input type="text" id="user-field" />
</div>
<div class="actions">
<a id="send-request" class="ui green button">Select user</a>
</div>
</div>
<a class="green ui button" id="show-pick-user-modal">Select user</a>
main.js:
$('#pick-user-modal').modal();
$('#show-pick-user-modal').click(function () {
$('#pick-user-modal').modal('show');
});
var $users = $('#user-field');
$users.typeahead({
name: 'users',
local: ["Andy","Betty","Charles","Dotty","Elton","Fred","Grace","Harriet",
"Ichabod","Jenny","Karen","Louise","Michael","Nathan","Oswald",
"Patricia","Quendy","Robert","Sylvia","Thomas","Ursula","Vivian",
"Wendy","Xavier","Yvonne","Zachary"]
});
function setUser(e,d){
alert(d.value);
}
$users.on('typeahead:selected',setUser);
$users.on('typeahead:autocompleted',setUser);
I've tried returning false from setUser and also calling e.preventDefault(), but neither has solved the problem.
I've seen exactly the same issue. The only thing that stops it from closing is setting closeable to false,
which is not a setting I would otherwise use.
When you enable debug mode for the modal, you get the following message:
I suspect that jquery isn't aware of the element.
I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/