Askupa supports this item


This author's response time can be up to 1 business day.

19 comments found.

Good job, great design! :)

Thank you!

Wow…nice UI !!! Can i use with AngularJS? Will be nice if you do an AngularJS compatible version.

Thanks! Not familiar with AngularJS. Is there any reason why it shouldn’t work with it?

Open automaticly when entering a page – BUT I have so many pictures on that page. Will the modal appear before loading the pictures?

You can delay the dialog-box to open only after the image (or images) has been loaded.

Then I call ‘DialogBox.prompt’ success – return a text. Can I return ‘false’ or NULL for disable popup after ‘promt’ ?

Thank you for your purchase!

You can’t send NULL to disable the popup, but you can create a custom dialog box that does that:{
    icon:    'fa fa-i-cursor',
    // Focus on the first input
    onOpen: function(){ 
        // Make inputs persistant
        if( typeof this.values !== 'undefined' )
            $.each(this.values,function( key, val ){
    buttons: [{
        text:   'Ok',
        click:  function() {
            var values = {},
                error = false,
                config = this;
            for( var i = 0; i < config.inputs.length; i++ )
                var input = config.inputs[i],
                    value = $('#dialogbox-input-'+i).val();
                if( true === input.required && '' === value )
                    error = true;
                values[] = value;
                // Do something when some inputs are missing
                // Do something when all inputs were filled
Replace the comment ‘Do something when all inputs were filled’ with whatever functionality you would like to have after a successful submit.

DialogBox.prompt({ title: ‘My title’, htmlBefore: ‘Text before’, htmlAfter: ’’, inputs: [ { type:’text’, placeholder: ’’, name: ‘val’ } ], success: function(values){ console.log(values.val); return false; } });

There can man many reasons for that, like perhaps a CSS rule overriding the dialogbox CSS. Can you post a link with the code? If not, does the console have any errors?

How can I use it without clicking a button? Can you write a sample ?

But if I use it like this:

<button id="error" class="red">Error</button>
   <script type="text/javascript">
           title: 'Error Dialog Box', 
           html: '

Oh, Snap !

This is the error dialog box template. Use it to let your user know that he is doing something wrong.'}); });

it is working. I don’t want to click a button to trigger it. When I load the page it should immediately appear… How ??

That’s because DialogBox.js hasn’t been loaded yet. Make sure you wrap your function in a ready function:

        title: 'Some Title', 
        html:  'Some text...'

That way you ensure that DialogBox.js and all other scripts have been loaded by the time that this function is called.

Thank you. It is working with your solution now…

I have purchased this dialogbox UI and used as following


<button id=”confirm” class=”with-icon”> Confirm</button>

JS $(’#confirm’).click(function () { DialogBox.confirm({ title: ‘Confirm’, html: ‘

Which is it?

This is the confirm template. Use it to ask the user to make a choice.

’ + ‘

Try to click outside the box to see the shake aniamation.

’, yes: function () { DialogBox.success({ title: ‘Yes/No Feedback’, html: ‘You clicked yes’, showTopBar: false, buttons: [], delayedClose: 1000 }); }, no: function () { DialogBox.error({ title: ‘Yes/No Feedback’, html: ‘You clicked no’, showTopBar: false, buttons: [], delayedClose: 1000 }); } }); });

I used in angularJS… It is throwing an error Uncaught type error : this.element.on(...).draggable is not a function

Make sure you include jQuery UI, in addition to jQuery

ec4229d0-61f9-4bb8-954e-30af50b1f5af – 25 Mar 2016

Hello, i have purchase this and its a good work! thank you. i have just a little problem: how cann this wait prossecing when a dialog-box wait for yes or no ? like a normal alert() call. i popup a yes/no box but the its dont prompt at the box-popup !!? the rest of the page is executed !! before deleting.. its mybe dangerous.. do i something wrong, or have i a param/switch .. not realy used !!

Thank you for your answer.

Hi, Thanks for the kind words! Can you explain what you mean? I’m not sure I understand what you mean

How can I disable clicking the area which is out of dialog box canvas to disappear the dialog box ? There is this feature for dialog.promt function with (require) but others doesn’t or I don’t know.

You can use the option closeOnBgClick to enable/disable background clicking. For example:
    closeOnBgClick: false
Read more about it in the documentation:

Thank you for info :)

You’re welcome!

How can I remove blur affect from background ? I wasn’t able to find it in documentation. There is only color option.

Hi, There is no option to disable the background blurring effect, but you can achieve it by adding the following CSS:
.dialogbox-background-blur-in {
    -webkit-filter: none !important;
    filter: none !important;
    -moz-animation-name: none !important;
    -webkit-animation-name: none !important;
    animation-name: none !important;
However I added this feature to the plugin’s road map.

I need help with creating a info dialog box that appears when the homepage (and only the homepage) is loaded. It contain info on a charity event the client is participating in… The demos seemed to be triggered by a button. How do i create a dialog that appears on page load?

Hey there, this is more of a general question that’s not related specifically to DialogBox, but you can achieve that using $(document).ready();. For example:
You can call dialogbox within any JavaScript event.

nice job mate . good luck ^^


Please excuse my ignorance but I have purchased and even after reading your documentation I’m still confused.

I am using a php file and have the css and js files referenced. First of all I check to see whether there are any files in a certain directory i.e.

$open = ”../asset/files”;

if ($files = glob($open . "/*")) {
    echo "You got files";
} else {
    echo "You haven't got files";

I want to show the error dialogue box if no files found and the success if files exist in the folder. How do I do this?

Regards Alan Edwards

DialogBox.js is a JavaScript library, not a PHP library. You would have to call to open the dialog box in the front-end of your site.

Hi, I have purchased the DialogBox software and would like to know how to create my own icons I can use in the boxes.

Regards Alan Edwards

You can use the “icon” option to specify a custom class name for the icon, and then use CSS to style that class.

Hi I love your software however I need to include a javascript variable in one of my confirm dialogue html strings within. Ajax for example the current html code is as follows…

DialogBox.confirm({ icon: ‘planned’, title: ‘GWI – Brita Re-Assign Job Sheets’, html: ‘You are about to Assign the Selected Records to another Engineer

Do you want to continue?’, yes: function() {

I need to include a javascript variable inside the confirm dialogue box html how do I do this for example if I have a variable already defined as Engineer_Name and this is set to my name for example (Alan Edwards) I want the html: code to output “You are about to Assign the Selected Records to Alan Edwards” rather than “You are about to Assign the Selected Records to another Engineer”

Therefore I need to include a variable in the html that is shown as the confirm prompt.


Hi there, Thank you for your purchase. You can simply change “You are about to Assign the Selected Records to another Engineer” to “You are about to Assign the Selected Records to ”+ Engineer_Name, where Engineer_Name is a variable that changes it’s value outside of the dialog box. The dialog box will re-render itself every time it pops up.

Thanks for there reply.


I’ve small needs that’s why I want to ask before if this can be done by the script. I’ve different links in my site for which I need confirmations. eg to delete something, to logout etc.

Currently I’m using syntax like:

<a href="....." onclick="return confirm('Are you sure for delete this?')">Delete</a>
Can I do something like this with the script. To have just one function and pass to funtion the message and if the confirmation is true to execute the link?

Thank you

Hi there, dialogbox.js has a built-in confirm dialog box that calls a function depending on the user’s input (whether he clicked yes or no). You can modify it to fit your needs. See for more info.

Hi Askupa,

I have an important issue I need to resolve. I am using your dialog box and its working great except in one instance.

I am asking user for confirmation on updating records in database, if they accept to prompt to continue it uses Ajax to call a php file and updates the records in the database and creates PDF files. However sometimes the number of records means that the creation of the PDF’s can take upto 1 minute to complete before it comes back to your dialog box and advises the user everything has completed.

This is an issue in that the user could click on the button to action the process again which I don’t want them to do because it can cause issues.

Can I disable buttons until Tyler process is complete or show hourglass or something to let the user know processing is taking place.


Hi Alan,

You can show the user a progress bar popup when the process is taking place. DialogBox.js has a built-in progress bar popup that you can use. For example:

    onOpen: function(){
        DialogBox.setProgress( 0 ); // Set the process to a percentage between 0 and 100

See for more info on the progress bar dialog box. You can use DialogBox.setProgress( num ) to set the position of the progress bar in real time as the process of PDF creation is taking place.

Hi thanks for the prompt reply. Please excuse my ignorance I am pretty new to AJAX an JQuery.

The creation of the PDF’s are done in the PHP file being called from the page where the dialogue box is shown, will your suggestion still work?

If so, how do I adjust the value of the progress bar that is in a different page to the one where the processing is taking place?



Alan, There are various approaches to this, you can try and google it. I found this question on stackoverflow:

The idea is to use AJAX and to update the progress bar asynchronously. You can use the DialogBox.setProgress( num ) to set the position of the progress bar anywhere in your script, since at all times there will only be one dialogbox instance.

It is very slow with Firefox Quantum Browser. I don’t know the reason. Just try with Latest version of Firefox browser.

before i buy i want to ask u something i want to show this popups only for one time per browser session and not on click i want to have it on load did u explained this kind of things on documents? that we can read it?

Hi there, this is possible using sessionStorage. You will need to write the logic yourself though. It’s not part of the plugin.

Hi I need to know how I can create a cookie for the accept for a dialogue box so it won’t keep opening up every time I go back to the page, is this possible?

Hi there, it’s possible, just set a cookie when the user accepts the prompt and add an if statement when showing the dialog box checking whether the cookie exists.