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

[Solved] Modal is not Modal!

2 Answers 143 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.

Bob asked on 16 Nov 2010, 09:39 PM

I don't see anybody else reporting this, so it must be something I have done wrong. I can't get Modal to work at all!

My master page:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>

<asp:ContentPlaceHolder ID="TitleContent" runat="server" />

</title>

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<% Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.css")

.Add("telerik.windows7.css")

.Combined(true)

.Compress(true))

.Render();

%>

<asp:ContentPlaceHolder runat="server" ID="HeadContent" />

</head>

<body>

<div class="page">

<div id="header">

<div id="title">

<h1>

My MVC Application</h1>

</div>

<div id="menucontainer">

<ul id="menu">

<li>

<%= Html.ActionLink("Home", "Index", "Home")%></li>

</ul>

</div>

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<div id="footer">

</div>

<% Html.Telerik().ScriptRegistrar()

.DefaultGroup(group => group

.Combined(true)

.Compress(true))

.Render();

%>

</body>

</html>

And my view:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Home Page

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<% Html.Telerik().Window()

.Name("Window")

.Title("Bob's test window")

.Draggable(true)

.Resizable(resizing => resizing

.Enabled(true)

.MinHeight(100)

.MinWidth(100)

.MaxHeight(800)

.MaxWidth(800)

)

.Modal(true)

.Buttons(b => b.Maximize().Close())

.Content(() =>

{%>

<p style="text-align: center">

The Telerik Window for ASP.NET MVC is the right choice for creating Window dialogs and alert/prompt/confirm boxes in your ASP.NET MVC applications.

It is not as simple to use as the "Alert" message box in javascript, but it has significantly more options and capabilities and is preferable to

the Alert message for many uses. It has a "modal" option that causes it to block input to other parts of the application.

</p>

<%})

.Width(500)

.Height(180)

.Visible(false)

.Render();

%>

<% Html.Telerik().ScriptRegistrar()

.OnDocumentReady(() =>

{%>

var lovelyWindow = $('#Window');

$('#button1').click(function(event) {

lovelyWindow.show();

});

<%}); %>

<button id="button1">Contact Information</button>

</asp:Content>

When it runs, everything works just fine except that the "modal" value seems to be ignored. I can click on the menu item and it works. The page behind the "modal" window is not grayed out! What am I doing wrong?

Update: the code above works if I go back to 2010.2.825.

Thanks in advance,
Bob

2 Answers, 1 is accepted

Accepted

answered on 17 Nov 2010, 03:12 PM

Hello Bob,

You should use the client-side API of the window in order to show it. This way, the window animations will play, too.

    var lovelyWindow = $('#Window').data('tWindow');
    $('#button1').click(function(event) {
        lovelyWindow.open();
    });

Sincerely yours,
Alex Gyoshev
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