?
Solved

Close bootstrap modal window from anywhere

Posted on 2014-11-24
6
Medium Priority
?
550 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…
Suggested Courses

777 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