We Keep Coding

Bootstrap modal with Vanilla Javascript

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.

How to create a pop-up login/register?

I am new, so tutorials/book recommendations would be excellent. I am looking to create a pop-up login/register similar to these sites below:
http://www.pacsun.com/
http://www.sears.com/
http://www.huffingtonpost.com/
I also would appreciate the name of what it is called.

You may use magnific popup, it's easily customize and it's have lot's of features. If you don't want to lot of features then you can build your own magnific popup js
easyly
Documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html

One option is magnific popup.
Magnific popup
Another option is Avgrund.js
Avgrund.js
However, if you really want to do it on you own without external sources, then create a div with all the options. Then style it using css, and set visibility to invisible.
Finally, using jquery, make it visible on button click.

jQuery, jQueryUI (and plugins) and AngularJS - how do they all fit together?

I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you

Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});

If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.

Which is your favourite javascript modal plugin?

I'm trying to choose a JavaScript modal plugin to use it on a web site.
I used to use nyroModal (without making any research on this topic) but they have updated it recently and all of the API has changed and, apparently, some of the functionallity of previous version has been lost.
So, I think that this is time to start thinking about whether nyroModal is the right plugin to choose.
I see this question: https://stackoverflow.com/questions/756342/whats-your-favorite-jquery-modal-plugin but I'm not asking for a jQuery plugin, but a JavaScript plugin. The one that you prefer.
This is the functionallity I need:
Launch the modal using an anchor
Launch the modal manually and specify its content
Ability to customize all its content
Ability to attach callbacks on specific modal events
Updated documentation
Thank you!

I think most of the best modal layers are built using a particular framework (i.e. jQuery, mootools, dojo, etc).
By the way, I used several times highslide and it's very powerful!! No frameworks needed :)

I am a mootools fan, and this plugin is my favorite at the moment. It does modal for images, videos, and etc. http://iaian7.com/webcode/mediaboxAdvanced
if you are looking for something similar to what facebook as. David Walsh has a modal plugin called LightBox and its great. http://davidwalsh.name/facebook-lightbox
Both of these plugins are based off Mootools framework.

How do jQuery modal box plugins compare?

There is a huge number of jQuery modal box plugins out there. Jitter lists 20 of them in this response (Modal windows plugin to rails).
Which one do you use and why? If you use different ones in different cases, how can they be broken down categorically by use-case?

I pick what I want based on its primary use. The fact that you can use a lightbox variant to show a dialog box, doesn't make it a good candidate in my mind.
Generally if I need to show photos or another iframed web page, I use a lightbox variant. Two that we have used at our studio and been happy with are:
Slimbox 2 (Just photos)
Colorbox (Pretty much any type of content)
For dialog type behavior, I highly recommend using jQuery UI's dialog. It is in active development, and is super customizable.
[rant] Whatever you do please don't use SimpleModal unless you need its special type of callbacks. Otherwise, when you try to hook into an onClose callback, you'll find yourself having to perform the actual closing of the box. Just my two cents on that one. :) I just know it has come up a few times here in SO, and it just feels awkward to use IMO [/rant]

I use Colorbox, it is because it is recommended alternative in non-maintained thickbox.
Basically it allows iframe, so image, flash etc are all okay. Also it is incentive for me to upgrade jQuery to 1.3.2 :-)

JQuery UI Dialog with a "plugin" to support iframes:
http://elijahmanor.com/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx
I use it because it's included in JQueryUI and uses the jquery ui theme you use, which makes for a consistent UI with little cost