bootstrapx-clickover Default click anywhere else to close not working

I hate to bother you with what is probably a mistake on my part, but I can't figure out what's missing. The click over is functioning fine for the most part but the click anywhere else to close is not wanting to work here.

http://jsfiddle.net/nosfan1019/FBU7w/

Sep 07 '12 23:09 ryangrush

Hi,

it appears that jsfiddle suppresses events inside the results box but if you wrap it with a div, you can see the behavior working:

http://jsfiddle.net/CuMcK/

HTH,

Lee

Sep 10 '12 14:09 lecar-red

That makes sense. Thanks for looking at for me.

Sep 11 '12 18:09 ryangrush

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.

Sep 24 '12 23:09 ryangrush

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.

Sep 25 '12 00:09 lecar-red

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.

Sep 25 '12 00:09 ryangrush

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"); }); 
});

Sep 25 '12 00:09 lecar-red

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.

Sep 25 '12 00:09 ryangrush

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

Oct 12 '13 22:10 divinoro

bootstrapx-clickover bootstrapx-clickover copied to clipboard

Default click anywhere else to close not working

bootstrapx-clickover
bootstrapx-clickover copied to clipboard