This is a migrated thread and some comments may be shown as answers.

Confirm dialog

9 Answers 4241 Views

Window

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

9 Answers, 1 is accepted

answered on 20 Mar 2012, 09:25 AM

I had same issue, but wanted configurable dialog type windows. I just stared using Kendo. I came up with this

the CSS

.czDLGIcon{

padding-right:10px;

width:32px;

height:32px;

padding-bottom:10px;

background-repeat:no-repeat;

}

.czDLGText{

padding-right:20px;

font-weight:bold;

padding-bottom:10px;

}

.czDLGBtn{

margin-right:5px;

border: 1px solid #666;

background-color:#0d0d0d;

color:#d59eff;

font-weight:bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

font-size: 13px;

padding: 4px 10px;

outline: 0;

-webkit-appearance: none;

cursor:pointer;

float:right;

}

.czDLGBtn:hover {

background-color:#1d1d1d;

}

.czWarning{

background-image: url('/assets/icons/dlgIcons/warning.png');

}

.czInformation{

background-image: url('/assets/icons/dlgIcons/information.png');

}

.czConfirm{

background-image: url('/assets/icons/dlgIcons/confirm.png');

}

.czError{

background-image: url('/assets/icons/dlgIcons/error.png');

}

.czStop{

background-image: url('/assets/icons/dlgIcons/stop.png');

}

The Script

var czDLGResult = "Cancel";

var czDLGWindow;

var czDLGCallBack;

function czDLGClose(BtnResult){

czDLGResult = BtnResult;

czDLGWindow.close();

};

function czDLGCloseCallBack(e){

czDLGWindow.unbind("close", czDLGCloseCallBack);

if (czDLGCallBack !== null){

czDLGCallBack(czDLGResult);

}

function czDLG(Title,Message,Type,Buttons,theFunction){

var DLGData = '<table cellpadding="0" cellspacing="0"><tr><td><div class="czDLGIcon ' + Type + '"></div></td>'+

'<td><div class="czDLGText">'+Message+'</div></td></tr></table><div>';

for(var i in Buttons){

var s = Buttons[i];

DLGData += '<input class="czDLGBtn" type="button" onclick="czDLGClose(\''+s+'\')" value="'+s+'">';

}

DLGData += '</div>';

czDLGResult = "Cancel";

if (theFunction !== undefined){

czDLGCallBack = theFunction;

} else {

czDLGCallBack = null;

}

czDLGWindow.bind("close", czDLGCloseCallBack);

czDLGWindow.title(Title);

czDLGWindow.center();

czDLGWindow.content(DLGData);

czDLGWindow.open();

}

$(document).ready(function() {

czDLGWindow = $("#czDLGWindow").kendoWindow({

actions: ["Close"],

draggable: true,

modal: true,

resizable: false,

visible: false,

title: "Confirm action",

}).data("kendoWindow");

});

Usage

put this in your body somewhere, just once

<div id="czDLGWindow"></div>

Call like this.

<script>

function

myTestClose(dlgResult){

alert('Dialog Result: '+dlgResult);

}

$(document).ready(function() {

$("#testBtn").click(function(){

// czWarning / czInformation / czConfirm / czError / czStop

czDLG("Test DLG","Are you sure?","czStop",["Cancel","OK"],myTestClose);

});

});

</script>

Like I said, I'm new this but this is what I came up with and it works for me :) . In my CSS I float the buttons right, so reverse the order of the buttons.

You can make the buttons anything you like and the Text of the button will be returned to your function.

Hope this helps...

M.