I have site navigation in Component A (Navigation).
I have a working bootstrap modal in component B (BootstrapModal).
Component A is referenced in index.html to display navigation.
What I'm trying to accomplished is a way to invoke modal window from Component B when a user clicks on a nav item containing “example” CSS class.
So will need conditional statement to invoke the modal when the CSS class is present.
Note that this is using bootstrap modal and am not able to add data-target="#myModal" to component A.
This is a response to Matt's comment in his answer:
Note: I know you said "Vanilla javascript", but the fact that you are
using Bootstrap seems to indicate that you are not using pure "Vanilla
Javascript". Just that you need a programmatic way of opening the
modal.
I am posting it as an answer since I currently have less then 50 rep and can't post comments.
Also, this may not have been relevant back when Matt wrote his answer, but it is now, so here it is:
Bootstrap 5 is dropping jQuery so any new code which uses or aims to use Bootstrap 5 will need a different answer than Matt's answer to this question. Again, this is not an answer, I didn't find one. Just want to raise the awareness. Currently, this makes upgrading to Bootstrap 5 a bit harder.
jQuery(document).ready(function() {
jQuery('a.className').on('click', function(e) {
e.preventDefault();
jQuery('#myModal').modal('show');
});
});
Just use bootstrap's api on the click event of the item you want to target with an if statement based on the hasClass function in jQuery:
$('#myTarget').on('click', function(e) {
if ('#myElement').hasClass('example') {
$('#myModal').modal('show');
}
});
Note: I know you said "Vanilla javascript", but the fact that you are using Bootstrap seems to indicate that you are not using pure "Vanilla Javascript". Just that you need a programmatic way of opening the modal.
Related
I am trying to create non-modal dialogs in my AngularJS app.
The app uses Bootstrap as well.
I am trying to create a draggable dialog, which remains active while the rest of the background can be interacted with (non-modal definition).
So, far I have played with Bootstrap modal which doesn't fit in with the above requirement.
This library:
https://github.com/jwstadler/angular-jquery-dialog-service
is exactly what I need, with one drawback this uses JQuery-UI (which I can't use, as it is too big)
Any pointers on how to achieve this with least dependencies ?
EDIT (20 August, 2014):
I ended up writing javascript code for the non modal dialogs, all working good as required.
EDIT (28 April, 2015):
Since, I can not post the answer here to my own question. This page should be seen just as findings.
Use Bootbox and set this to disable its modal style:
.bootbox {
overflow:visible;
height:1px;
position:absolute; /* if necessary */
}
Also, you'll have to call this JavaScript code:
$(document).off('focusin.bs.modal'); // disable Bootstrap's anti-focus stuff
$('body').removeClass("modal-open");
If you're using the dialog box just for the purpose of showing some information, not for taking any input,
You can use BootBox : http://bootboxjs.com/
angular-ui modal dialog boxes : http://angular-ui.github.io/bootstrap
Also, an alternative approach could be using block UI. You can design your dialog in the HTML, and show that HTMl in an blocking dialog box using Malsup Block UI..
More Details : http://malsup.com/jquery/block/#dialog
Disclaimer : All of them have some or the other dependency..
You can use Bootstrap and integrate it with AngularJS. It is minimal JS, and based on best practices for CSS and responsive design.
Hi Im using wordpress and i have a navigation.
I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.
Currently my wp_nav_menu is in a nav container in its own div.
Any help would be really appreciated. I need this to be totally dynamic.
I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...
Thanks folks
Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.
$( "#idOfParent" ).on( "click", function () {
$(this).children().toggleClass("HideNav").toggleClass("ShowName");
}
Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.
I am attempting to integrate jQuery UI tabs with knockout and I'm having a problem with tabs added at the start of my js. They seem to have a class ui-tabs-loading and I'm not sure why.
Here is the fiddle: http://jsfiddle.net/edhedges/mPbAL/
As you can see at the bottom of the js I am removing that class, but if you comment that out it breaks the first three tabs.
To "answer" your question, the ui-tabs-loading class appears to be added when an ajax request is spawned to fill the tab content (source: line #801 - https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.tabs.js). As to why this particular case is being treated as ajax by jQuery UI, I'm still looking into that because I'm curious.
I know that jQuery plugins historically don't work well with javascript data-binding frameworks, but there's definitely always a work around.
I'll update my answer if I figure something out.
EDIT: Keep in mind this answer was asked before Bootstrap 2 came out and therefore is relative to the first release
I am trying to dynamically add and show Bootstrap modal windows with AJAX content, but after looking at the documentation for a good hour and a half I dont understand what classes or attributes I need to add to my modal div so they work with the modal API.
Right now I have something like this:
var $modalWindow = $('<div />', {
class: 'modal fade static',
style: "display: none;",
text: "Test"
});
$('body').append($modalWindow);
$modalWindow.modal('show');
And it doesnt work... Maybe I am being dense, but I cannot find any info on the docs about how to setup my modal window before calling the show method.
Edit: Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
EDIT: Before downvoting this answer, consider this was before bootstrap 2, and as another commenter said he had the exact same issue and also solved it by adding tipsy and popover.
Boostrap 2 is way better than its first incarnation, BTW
I am a Javascript/jQuery/Prototype newcomer and I have a page that has a Prototype function to get info from a database and put it into some input fields. This was made before I came to work on this site and now I've been asked to add a hide/show div function.
I tried it in jQuery and there were clashes with the two frameworks, (as found in my previous question).
My question now is, how would I go about building a show/hide function in Prototype? I think it will be easier to do it this way than to re-build the info grabber.
The page I want to add this to is here. (the green "ny kunde" button should show the div directly but one below it newCustomer.
I found this resource: Hide show div with Prototype but I have no idea on how to implement it.
Thanks. :)
You can use jQuery by following these instructions to stop from clashing with other libraries.
Prototype provides the Element.hide() and Element.show() methods which means you can hide a div with ID #hello with:
$('hello').hide();