HOW TO SHOW DATA IN A MODAL(POPUP) USING JQUERY

Sachin Singh

Total Post:26

Points:182
Posted by  Sachin Singh
 860  View(s)
Ratings:
Rate this:
Hi Everyone,

I want to display all users in model(Popup) using jQuery.
Here, Below my view page code is:

@{
    ViewBag.Title = "Users";
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
}
@Html.ActionLink("All Users", "User", "Home", null, new
{
    @class = "openDialog",
    data_dialog_id = "aboutDialog",
    data_dialog_title = "About Us"
})
<div id="aboutDialog">
<h2>Users</h2>
<p>
    //.................... 
</p>
<p><a href="javascript:void(0);" class="close">Close this Window</a></p>
    </div>
 
<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this)
                .attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove(); },
                    modal: true,
                    height: 250,
                    width: 400,
                    left: 0
 
                })
            .load(this.href);
        });
 
        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

 

Please Can anyone give me a solution.

Thank you.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!