Show Dialog with fullscreen
4 Apr 20222 minutes to read
You can show the dialog in fullscreen by passing true
as argument to the dialog show
method.
<div id='container' >
<ejs-button id="targetButton" content="Open Dialog"></ejs-button>
<ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with fullscreen display." target="#container" width="250px">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
document.getElementById('targetButton').onclick = function () {
var dialog = document.getElementById("dialog").ej2_instances[0];
dialog.show(true);
}
function dlgButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
}
</script>
<style>
#container {
height: 100%;
width: 100%;
position: absolute;
padding: 20px;
margin: 0px;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
}
</style>
public class HomeController : Controller
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
public string cssClass { get; set; }
}
public ActionResult Index()
{
ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };
ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
return View();
}
}