Having trouble understanding how to properly enqueue jquery in wordpress

So as recommended, I enqueue my scripts in the function.php file instead of in the head like the following example:

function bok_scripts() {
    wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );
}
add_action( 'wp_enqueue_scripts', 'bok_scripts' );

The problem is that this js won't work unless I add jquery to the head using the usual:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The problem I always run into, though, is that WP automatically loads a version of jquery using the wp_head(); from the wp-admin/includes directory. Because the jquery is getting loaded 2x, it breaks some of the code. For instance the following will throw a 'This is not a function ($)' error:

$(window).load(function(){
    $('#modal-notices').modal('show');
});

Does anyone know how to overcome this, I've tried a bunch of stuff, but all that seems to work is deleting the jquery from the wp-admin/includes directory. Obviously, though, that isn't a proper fix.

Any insight is greatly appreciated. thanks!