Isuru
Isuru

Reputation: 970

JQuery modal doesn't get popuped

I want to display a popup box. I tried it in this way.

In the Layout

@Styles.Render("~/Content/css")
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
@Scripts.Render("~/bundles/modernizr")

<script>
$(function () {
    $('#dialog-modal').dialog({
        height: 140,
        modal: true
    });
});
</script>

And in my index view

@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Home Page";
}

<div id="dialog-modal" title="Basic Modal Dailog">
   <p>Successfully Updated</p>
</div>

But this only shows the text in index view("Successfully Updated") without showing a dialogbox. The dialog box is not working. What might cause this? pls help! Thanks in advance!

Upvotes: 0

Views: 422

Answers (2)

Prashant Kumar
Prashant Kumar

Reputation: 386

Try this :

@Styles.Render("~/Content/css")
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
@RenderBody()
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
@Scripts.Render("~/bundles/modernizr")

  <script>
    $(function () {
        $('#dialog-modal').dialog({
            height: 140,
            modal: true
        });
    });
    </script>

<div id="dialog-modal" title="Successfully Updated"></div>

Upvotes: 0

user5229526
user5229526

Reputation:

Try this code,

<script>
            $(function () {
                $("#dialog-modal").dialog({ modal: true,

                })

        </script>
    }

    <div id="dialog-modal" title="Successully Updated">

    </div>

Upvotes: 3

Related Questions