Solved

Close bootstrap modal window from anywhere

Posted on 2014-11-24
6
519 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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 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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

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…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

726 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