?
Solved

Close bootstrap modal window from anywhere

Posted on 2014-11-24
6
Medium Priority
?
602 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 43

Expert Comment

by:Rob
ID: 40463775
Specify the "backdrop" option to true and not static
0
 
LVL 43

Expert Comment

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

Expert Comment

by:Rob
ID: 40463838
Where is your code for calling the modal?  The button should have the data-backdrop="true" attribute
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 43

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob earned 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

612 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