Problem when closing modal window

[Tiago]

I need to create a scheme where my pages open windows within the iframe contained in KendoWindow.
To establish a modal window I need to create it from within my home, because if you create it within a modal child page to only cover the child page.
I'm having to develop a scheme for windows like a desktop application.
Below is the JavaScript library I wrote to do this for me:

var kendoWindowFactory = new function () {

 

    var __modalKendoWindow;

    var __functionCallback;

 

    this.createKendoWindow = createKendoWindow;

    this.createModalKendoWindow = createModalKendoWindow;

    this.modalReturn = modalReturn;

 

    function createKendoWindow(element) {

 

        var frameId = "___kendoWindow_" + element.id;

 

        var LINK = element.href;

        var TITLE = $(element).attr("data-title");

        var WIDTH = $(element).attr("data-width");

        var HEIGHT = $(element).attr("data-height");

 

        if (!(parseFloat(WIDTH) > 0)) {

            WIDTH = "50%";

        }

 

        if (!(parseFloat(HEIGHT) > 0)) {

            HEIGHT = "50%";

        }

 

        var kendoWindow = document.getElementById(frameId);

 

        if (kendoWindow) {

            $(kendoWindow).data("kendoWindow").toFront();

        }

        else {

            kendoWindow = $("<div />")

                .attr({ id: frameId })

                .appendTo("body");

 

            $(kendoWindow).kendoWindow({

                title: TITLE,

                modal: false,

                width: WIDTH,

                height: HEIGHT,

                content: LINK,

                visible: false,

                deactivate: function () {

                    this.destroy();

                },

            }).data("kendoWindow").center().open();

 

            $(kendoWindow).css({ overflow: "none" });

        }

 

        return false;

    }

 

    function createModalKendoWindow(element, functionCallback) {

 

        var frameId = "___kendoWindowModal_";

 

        __modalKendoWindow = null;

        __functionCallback = functionCallback;

 

        var LINK = element.href;

        var TITLE = $(element).attr("data-title");

        var WIDTH = $(element).attr("data-width");

        var HEIGHT = $(element).attr("data-height");

 

        if (!(parseFloat(WIDTH) > 0)) {

            WIDTH = "770px";

        }

 

        if (!(parseFloat(HEIGHT) > 0)) {

            HEIGHT = "470px";

        }

 

        var kendoWindow = document.getElementById(frameId);

        if (!kendoWindow) {

            kendoWindow = $("<div>").attr({ id: frameId }).appendTo("body");

        }

 

        __modalKendoWindow = $(kendoWindow).kendoWindow({

            title: TITLE,

            modal: true,

            width: WIDTH,

            height: HEIGHT,

            visible: false,

            deactivate: function () {

                this.destroy();

            },

        }).data("kendoWindow").center().refresh(LINK).open();

 

        $(kendoWindow).css({ overflow: "none" });

 

        return false;

    }

 

    function modalReturn(value) {

        __modalKendoWindow.close();

        if (value) {

            if (__functionCallback) {

                __functionCallback(value);

            }

        }

    }

}

The application is being written with Visual Studio 2012 with a WebForms application.


So I set my menu to open the windows. This is the main page:

<script>

     $(function () {

         $('#tabMenu a').click(function (e) {

             e.preventDefault();

             kendoWindowFactory.createKendoWindow(this);

         });

     });

 

     $(document).ready(function () {

         $("#tabMenu").kendoTabStrip();

     });

 </script>

So I set the child pages (which are opened within kendoWindows using iframe) to open a modal window.
Fits a search window, for example:

<script type="text/javascript">

    function returnValue(value) {

        document.getElementById("<%= txtCodigo.ClientID.ToString() %>").value = value;

        __doPostBack("Municipio.aspx", "txtCodigo_TextChanged");

    }

 

    $(function () {

        $("#<%= btnConsultar.ClientID.ToString() %>").click(function (e) {

            e.preventDefault();

            window.parent.kendoWindowFactory.createModalKendoWindow(this, returnValue);

        });

    });

</script>

Every kendoWindow is created and removed dynamically.

To return a selection made in the modal window use this code:

<script type="text/javascript">

    $(function () {

        $("#grvMunicipio").kendoGrid({

            columns: [

                { field: "Codigo", title: "Código" },

                { field: "Descricao", title: "Município" },

                { field: "Uf", title: "Estado" }

            ],

            dataSource: {

                pageSize: 15

            },

            sortable: true,

            selectable: true,

            pageable: {

                refresh: true,

                pageSizes: true

            }

        });

 

        $('#grvMunicipio').dblclick(function () {

            var Grid = $("#grvMunicipio").data("kendoGrid")

            Grid.select().each(function () {

                var dataItem = Grid.dataItem($(this));

                RetornaValor(dataItem.Codigo);

            });

        });

    });

</script>

I use a callback routine passed as a parameter to the main page, the JavaScript function created, which is to destroy the modal window and return the value to the desired field.

My problem is: When I open the modal window by button link child window, the child window is frozen.
I close the modal and I can no longer use the controls / window elements daughter.
However, when moving the child window with the mouse controls are released.

The child page now has no code in your code behind.

Can anyone help me with a particular problem?

From now on, thank you all!

[Tiago]

I switched to jQuery UI Dialog

Thank´s