Add Close Button inside Modal Windows

The example below demonstrates how to add a Close button to a modal Kendo UI Window.

Example

    <div id="example">
      <div id="window">
        <button class="k-button close-button">Close</button>
      </div>
      <button class="k-button open-button">Open window</button>

      <script>
        $(document).ready(function() {
          var wnd = $("#window");

          $(".open-button").bind("click", function() {
            wnd.data("kendoWindow").open();
            $(this).hide();
          });

          $(".close-button").click(function(){
            // call 'close' method on nearest kendoWindow
            $(this).closest("[data-role=window]").data("kendoWindow").close();
            // the above is equivalent to:
            //$(this).closest(".k-window-content").data("kendoWindow").close();
          });

          if (!wnd.data("kendoWindow")) {
            wnd.kendoWindow({
              modal: true,
              title: "Dialog window",
              close: function() {
                $(".open-button").show();
              },
              visible: false
            });
          }
        });
      </script>
    </div>

See Also

Other articles and how-to examples on the Kendo UI Window:

• Window JavaScript API Reference
• How to Post to Iframe
• How to Restrict Window Positioning
• How to Use Custom Action Icons

For more runnable examples on the Kendo UI Window, browse the How To documentation folder.