I downloaded and followed the steps to include files. However all I get in the box is Error 404! Though all effects are working fine. Any specific reason why this happens ?

@dixso

Hi- <3 the plugin.

It seems that when I am scrolled down on my page, and I fire the custombox not with a onClick, it scrolls to the top of the page to display the modal.. then on close, it returns the scroll point.

The error actually can be seen in the demo:
http://dixso.github.io/custombox/

If you scroll to the bottom of the docs, then click the Slip, Makeway, & Letmein examples-- it does the same thing. Quickly scrolls up to top of page, displays modal fine, then on close it returns to the correct scroll point.

Edit:

$(document).mouseleave(function (evt) {
evt.preventDefault(); 
doModal();

function doModal() {
     if (open == false) {
         if (document.cookie && document.cookie.indexOf('TreatExpiration=1') != -1) {
             console.log('Cookie is present');
         } else {
             $.fn.custombox({
                 effect: 'blur',
                 speed: 30,
                 overlaySpeed: 0,
                 scrollbar: true,
                 // overlayColor: '#FFF',
                 // overlayOpacity: '1.0',
                 url: '#optkit_modal',
                 responsive: true,
                 open: function () {
                     open = true;
                     set_cookie();
                 },
                 close: function () {
                     open = false;
                 }
             });
             return false;
         }
     }
 }
}

This behavior seems to be happening for me when I use any of the effect types, though.

Cheers

I want make my custombox draggable, it's supported ?
http://jsfiddle.net/nj9cupyd/2/

Hello,
We have just add Custombox to twittstrap resources list
http://www.twittstrap.com/resources/details/custombox
Under : Modals
Regards

body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.

when loaded <script id="product_grid_temp" type="text/template">

my call

in my use <script id="product_grid_temp" type="text/template">

Ex.

error throwing

hi there !
i have 100-200 customboxes on page with the same properties.
need to copy this code 100 times with different ID (#element, #element2, #element3....)?

$('#element').on('click', function ( e ) {
    $.fn.custombox( this );
    e.preventDefault();
});

div#modal
div#modal2
div#modal3
div#modal4
div#modal5.......

Hi,

I have worked this script facing issue,
If I click show popup & I click another popup from old poup it does not show properly

Clicking on the overlay to close the modal triggers the close callback twice due to the "data-custombox" attribute attached to the modal element.

Here an example:
http://jsfiddle.net/tqQ9b/1/

Hi,
When i open a custom box the parent window automatically scrolling to top, How to avoid this??

Thanks in advance.

[question]

Hello,
Is it possible to react with the DOM of the modal wrapper of the custombox.

What I mean, lets say that in the .modal-example-body we have a link with an #clickme.
Can I use something like that

$('#clickme').on('click', function ( e ) {
e.preventDefault();
console.log("clicked");
});

I have tried with your demo but no luck.

In my project, inside the .modal-example-body I have several input[type=text] and I would like onClose to get the values.

Thank you!

How can I adapt this script to work in WordPress. I tried using it in my Genesis child theme functions.php file, but it's not working. I have jquery, the custombox.js and css files all linked properly.

Is there a way to make the modal not to duplicate content into DOM? This is a serious issue when applying validation scripts to unique element id's and they are duplicated (in my case).
Other than this, the plugin works great.

I need you make new option in your plugin that open in iframe or no like ajax.

Hello,
I wanted to know if it can do a scroll of the content inside the modal, if there are long texts.

Thank you.

Your example file is loaded with so much extra HTML that it takes away from how to simply use this code base. All I wanted to see was ll the files needed to be included and the basic HTML/CSS need to make it work.

I have it partly working, but I get no panel structure or overlay color as your site example shows. all I get is text.

Hi,

Firstly congrats on a great pop up box. The only issue I'm having is that when the box is closed, the whole page shifts to the right. I'm using the inline version.

cheers

hello again -
sometimes I getting blurred text in a pop-up
only font-size up helps

Hi, I would like to see a callback on the close, I'm need to open a new popup with a new Custombox immediately after I have closed the first box.

In the "callbacks" example the close callback is not executed when you click on the "x" button. It is however executed if you click on the overlay to close.
I'm on Chrome 30.0.1599.66

Hi,
Please help us,
we add the

.custombox-html {
overflow-y: hidden;
height: auto;
}

i work fine on desktop but on mobile not

you can see it here: http://site.localyoo.com/100009/Sarah
in Places

Hi i use custom box with JavaScript my code:

window.onload = function () {
document.getElementById('test').addEventListener('click', function ( e ) {
custombox( this, {
effect: 'fadein',
cache: true,
url: 'test.php',
close: function close () {
alert('close');
}
});
e.preventDefault();
}, false );
};

works fine but when i try use $.fn.custombox('close'); box not closing:/

console error:
[Error] TypeError: 'undefined' is not a function (evaluating '$.fn.custombox('close')') onclick (profile, line 1)

Hello! I did all the instructions but always a window scrolls up, do not work

return false || e.preventDefault()

I have tried to
<span>.., <a href="#modal">..,<button>..
but nothing helps

//====================================//

$('.for-callback').on('click', function () {
            $.fn.custombox( this, {
                url: '#callback-form',
                eClose : '.window-close',
                effect: 'fadein',
                overlay: true,
                overlayOpacity: '0.5'
            });

            return false;

        });

Hi,
I use knockout work with custom box, but data-bind="click: test" failed, click event doesn't work.
below is my code:

                </div>
                <div class="cartlist">
                    <div class="cart_line" data-bind="click: test">
                        <div class="wrapper">
                        <div class="name" data-bind="text: 'fjkdlajflsd'">商品名字1</div>
                        <div class="num"><span>1</span>份</div>
                        <div class="price">￥12</div>
                        </div>
                        <div class="remove"><i class="icon-remove2"></i></div>
                    </div>

When i use CustomBox my background(on body: url() top center) jump. It is caused by scrollbar disappears, is there any chance to fix it add some parameter?

Hi,

have tried, on page load and on open custombox callback, to add jquery validate on a form inside the modal but doesn't work.

It's a know bug?

Hi it's me again! How are you?

Quick question on if you know how to fix this. If you go on http://theintegrateur.com/clients/orangium/arobas/#projects and click on the first thumbnail the lightbox will open. But since my top navigation and side navigation are "position: fixed" it moves because the overflow of the scrollbar is hidden.

Would you know how to fix this? :)

Seems to have trouble running other JQuery ui elements inside the modal. Tooltips are working inside the app, but not inside the modal. Same with JQuery sortable lists.

Really like the plugin, but need it to be able to work across the board. Any ideas?

Hey, maintainer(s) of dixso/custombox!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library dixso/custombox is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "dixso/custombox",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="src/jquery.custombox.js"></script>
<link rel="stylesheet" href="src/jquery.custombox.css">

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="demo/css/demo.css">

<script>
$(function () {
$('#sidefall').on('click', function ( e ) {
$.fn.custombox({
url: '#modal'
});
e.preventDefault();
});

$('#sidefal').on('click', function ( e ) {
    $.fn.custombox({
        url: '#modal'
    });
    e.preventDefault();
});

$('#sidefall1').on('click', function ( e ) {
    //alert("dsfds")
     $.fn.custombox({
        url: '#modal1'
    });
    e.preventDefault();
});

$('#sidefall2').on('click', function ( e ) {
    //alert("dsfds")
     $.fn.custombox({
        url: '#modal1'
    });
    e.preventDefault();
});

});
</script>
<a href="#modal" id="sidefall">Fadein</a>
<a href="#modal1" id="sidefall1">Fadein</a>

<div id="modal" style="display: none;" class="modal-example-content">
<div class="modal-example-header">
<button type="button" class="close" onclick="$.fn.custombox('close');">×</button>
<h4>Test Modal I</h4>
</div>
<div class="modal-example-body">
<a href="#modal1" id="sidefall2">Fadein</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<button type="button" class="close-button" onclick="$.fn.custombox('close');">Close</button>
</div>

</div>

<div id="modal1" style="display: none;" class="modal-example-content">
<div class="modal-example-header">
<button type="button" class="close" onclick="$.fn.custombox('close');">×</button>
<h4>Test Modal II</h4>
</div>
<div class="modal-example-body">
<a href="#moda" id="sidefal">Fadein</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<button type="button" class="close-button" onclick="$.fn.custombox('close');">Close</button>
</div>

</div>

Hi,

Awesome modal window!. Is there a way to make the flip effect not random?

Carlos

Windows 7 - Firefox (latest version)

Hi I tried installing the plugin but when I click on a link with the class I assigned I get this error:

Invalid or illegal string was specified (line 153)

Thanks for your time!
Alex

select box is not opening properly inside the popup when I am using "sign" effect. options are moving down leaving space between options and select field.

I have added following code to resolve this issue.

.custombox-show.custombox-sign .custombox-modal-content {
transform: none;
transform-style: initial;
}

hi... i need open multiple link

i use this:

window.onload = function () {
document.getElementById('review').addEventListener('click', function ( e ) {
custombox( this, {
effect: 'fadein',
cache: true,
customClass: 'customslide';
});
e.preventDefault();
}, false );
};

and this use in while:

< a href='includes/lightbox/test.php?id=".$key->user_id."' id='review' class='list'>test< /a>

but open just first lightbox

http://dixso.github.io/custombox/
When I try to custom examples, closing resets me to the top of the document.
Debian, Chrome

I can't figure out how to auto start it on page load. Below is a code I use for link click triggering which works.

$(function () {
$('#popup').on('click', function () {
$.fn.custombox( this, {
effect: 'newspaper'
});
return false;
});
});

Next one below is the auto start and it does not work, obviously url parameter is not right somehow... I am new to jquery...

$.fn.custombox({
url: '#popup',
effect: 'newspaper'
});

Hi,
I have two pages login.php and signup.php
when i click login it works fine opening login page in custom box
i have a link for signup in login page

so what i need is when i click on signup link have to close the login box and open signup page custom box.
Thanks in advance.

The object does not support the property or "keys" method
jquery.custombox.js, Line 573 Character 13

$j.fn.custombox({
url: 'lightbox/profile-photo.php',
effect: 'slide',
position: 'center',
open: function () {
//alert('open');
},
complete: function () {
//alert('complete');
getImage(data);
},
close: function () {
//alert('close');
}
});

Here Image loading in a custombox using getImage(data) function, So width of the custombox less than the image dimensions. How to update custombox width according to image?

Is it possible to wait with the custom box auto-start until image inside it is fully loaded so it runs smoothly?

i could not call the custombox without the onclick event?!
i tried several conbination to call the id of div directly could not succeed it always give me error 404
this is my simple code

Hi,

First thanks for great work. Problem is any JavaScript function is not working on modal window. Suppose i write following function.
$('.modal').click(function(){
console.log('Hello World !');
})

This function is not working. I can't get what's the problem.

Thanks

I'm having an issue in Chrome and FF where content shifts when the modal windows opens and closes. It is due to the right scrollbar on the host page being removed, shifting content right when the modal is shown and shifting left when the modal is closed and the scrollbar returns. How can I correct this?

See the issue in action here: http://www.hebronbrick.com/thin-brick/. Select a brick and then click the (i) info icon for the modal window.

If site is not adaptive, position of the window does not centered on mobile device, so in the IE 9,8.

Only Newspaper and Slit are working in Safari (5.1.10) on OS X (10.6.8)

When using a mobile device if the box contains a long string of text the top gets cropped off. I can scroll down but not up to see the top of the box. Is there a way to make the box position to the top of the page instead of the center for certain screen sizes?

Thanks.

Hi,
I use costombox in mobile html, what should I do to custom the position of modal?

Best Wishes!

i have problem on ipad .
window can not fit
and on pc too .

I can't make this work at all in Windows 8 and IE10.
Nothing happens if I click a link that is suppose to open the Modal Window.