Default click anywhere else to close not working

I had this on the backburner when you responded, finally back to working on something with this again though. The containing

works but is not ideal. Does my containing

have to span the entire page for a user to exit out of the modal, or am I doing something wrong?

That doesn't sound right by the looks of your examples page.

lecar-red commented 12 years ago

that sounds very odd. Do you have a non js fiddle example that I could look at?

The global close handler is attached to the body element so unless you set global_close to false then it should close when clicking anywhere on the page.

ryangrush commented 12 years ago

Thanks for the quick reply :)

Here is a simple example (using TBS 2.1.1 btw)

<!DOCTYPE html>
<html>
<head>
    <title>Clickover</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" />

    <script src="javascript/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/lecar-red/bootstrapx-clickover/master/js/bootstrapx-clickover.js" type="text/javascript"></script>  

<style>

body {
    padding: 100px;
    background: #eee;
}

</style>

</head>
<body>

<a class="btn btn-primary" data-content="click over content.">See Example</a>

<script type="text/javascript">
$(function () {

    $('.btn').clickover();

});

</script>

</body>
</html>

If I click anywhere within the top ~200px of the body it will close it (body { padding: 100px } ), but anywhere below and it doesn't want to work.

lecar-red commented 12 years ago

Interesting, I wonder if the body isn't pushing all the way to the bottom of the browser page. You could try adding jquery body event to test this.

Quick example:


$(function() { 
  $('body').on('click', function(e) { alert("Body was clicked"); }); 
});

ryangrush commented 12 years ago

That looks to be the problem. Again if its below the ~200px it doesn't trigger the alert.

Probably won't be too much of an issue in practice though.

divinoro commented 11 years ago

Hi, I think i have similar issue - when body is not as high, as viewport of browser, "click everywhere" is not really everywhere :)

My suggestion is to bind event to document instead of body (line 75):

$(document).on( this.attr.click_event_ns, function(e) { if ( !that.tip().has(e.target).length ) { that.clickery(); } });

Then unbind on line 113:

$(document).off( this.attr.click_event_ns );

lecar-red / bootstrapx-clickover

Default click anywhere else to close not working #14