Solved

Close bootstrap modal window from anywhere

Posted on 2014-11-24
6
446 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now