Solved

Close bootstrap modal window from anywhere

Posted on 2014-11-24
6
468 Views
Last Modified: 2014-11-25
I have a page here that when I click an item it pops open 1 modal window.
If I add something to my cart, a second modal window opens.
How can I set it up that if you click anywhere outside the box it closes the window?
http://www.oorahauction.org/prizes.asp
0
Comment
Question by:rivkamak
  • 5
6 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40463775
Specify the "backdrop" option to true and not static
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40463780
You'll see here that clicking the background closes the modal: http://jsbin.com/febohe/1/edit
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40463838
Where is your code for calling the modal?  The button should have the data-backdrop="true" attribute
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40463841
in other words your <a>

<a class="portfolio-link" href="#" data-video="Ah-cLKaV_oM" data-image-id="1" data-prize-id="" data-toggle="modal" data-title="Hi-Tech" data-caption="Experience the future with an aerial camera Drone (it's a flying remote control video camera!), Google Glass, and an Apple Watch, plus ten Shabbos Zman light switches for your home." data-image="images/prizes15/lg/1.jpg" data-target="#image-gallery" data-backdrop="false">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="images/prizes15/med/1.jpg" class="img-responsive" alt="Hi-Tech ">
                    </a>
0
 

Author Comment

by:rivkamak
ID: 40464597
It's actually just called directly from a different script:
        $('#SuccessBox').modal('show');

is it my modal box that needs to have the data-backdrop or the click script?
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40464849
It will work with either. As you can see in the bootstrap docs http://getbootstrap.com/javascript/ you can have it on the calling element as a data attribute or you can call it directly in JavaScript.

You should only need to do it once in:
$(document).ready(function() {
    $('#SuccessBox').modal({
        backdrop: true
    });
});

Note: my last comment should have the backdrop as true, not false
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question