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

[Solved] Dialog box not showing

6 Answers 743 Views

Upload

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

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

6 Answers, 1 is accepted

answered on 14 Sep 2011, 03:16 PM

Hello Charley,

The problem may be related to z-index and stacking contexts, which cause the upload to be positioned under the modal window. Alternatively, the modal window may be cancelling some click events. However, I cannot provide further advice without a running demo or a live URL.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 14 Sep 2011, 04:20 PM

Dimo

Thanks for the quick response. I am posting partial html as well as partial javascript. I created a jquery extension that gets the highest z-index of all elements in the DOM. I use this to set the z-index of the div that contains the upload button and its pieces.

HTML of modul

<div id="repairLineExtraFields"> 

<div style="float:right;width:200px;margin-left:8px;">

<p>

<div style="float:left;height:200px;" id="downLoadDialog">

@(

Html.Telerik().Upload()

.Name("fileNames")

.Multiple(false)

.Async(async => async

.Save("UploadFile", "Invoices", new { messageId = "testID" })

.AutoUpload(false)

)

.ClientEvents(events => events

.OnError("onError")

)

</div>

</p>

</div>

Javascript

$(document).ready(function () {

$("#repairLineExtraFields").dialog({

resizable: false,

draggable: true,

modal: true,

width: 610,

height: 350,

autoOpen: false,

open: function(){

$("#downLoadDialog").css('zIndex', ($(document.body).findHighestZindex() - -1));

                    $(".t-upload-button").click(function(){alert('hi uploader');});

getCurrentRepairLineExtraFieldInformation();

},

buttons: {

"Update Repair Line": function () {

updateCurrentRepairLineExtraFieldInformation();

if(validRepairLineExtraFields)

{

$(this).dialog("close");

}

},

Cancel: function () {

clearExtraRepirLineFields();

$(this).dialog("close");

}

});

$('.btnadditional').click(function () {

$("#repairLineExtraFields").dialog('open');

}); // plus other stuff unrelated.

});

(function($){

$.fn.findHighestZindex = function()

{

var zIndexArray = [0];

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++)

{

var zIndex = all[i].style.zIndex;

if(zIndex != '')

{

zIndexArray.push(parseInt(zIndex));

}

var largestZindex = Math.max.apply(Math, zIndexArray);

return largestZindex;

};

})(jQuery);