Search results

Display a Dialog with custom position

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the Position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.

razor
controller.cs
<div id="container" style="height:400px;">
    @Html.EJS().Dialog("firstDialog").Header("Position-01").Content("The dialog is positioned at {X: 160, Y: 14} co-ordinates.").Position(p => p.X(160).Y(12)).Target("#container").Width("360px").Height("120px").Render()
    @Html.EJS().Dialog("secondDialog").Header("Position-02").Content("The dialog is positioned at {X: 160, Y: 240} co-ordinates.").Position(p => p.X(160).Y(240)).Target("#container").Width("360px").Height("120px").Render()
</div>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Output be like the below.

dialog