You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
2.6 KiB

@using Syncfusion.EJ2
@{
var defaultanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom };
}
@{
ViewBag.Title = "Dialog";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Dialog Features:</h2>
<br/>
<li> Dialog Samples - Default</li>
<li> Position - Center Center</li>
<li> Animation - Zoom</li>
<li> DialogType - Non-modal</li>
<li> RTL</li>
<li> Draggable</li>
<li> Theme - Bootstrap-Theme</li>
<br/>
<div id = "ControlRegion">
<div class="col-lg-12 control-section" id="target">
<ejs-button id="normalbtn" content="Open"></ejs-button>
<ejs-dialog id="default_dialog"
allowDragging="true"
enableRtl="true"
animationSettings="defaultanimation" width="500px"
isModal="false"
target="#target" open="dialogOpen" Content="<p>In the Succinctly series, Syncfusion created a robust, free library of more than 130 technical e - books formatted for PDF, Kindle, and EPUB.<br> <br>The Succinctly series was born in 2012 out of a desire to provide concise technical e-books for software developers.Each title in the Succinctly series is written by a carefully chosen expert and provides essential content in about 100 pages.</p>"
close="dialogClose" showCloseIcon="true" header="About SYNCFUSION succintly series">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="dlgButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
<e-dialog-position
X="center" Y="center"
></e-dialog-position>
</ejs-dialog>
</div>
<style>
.control-section {
padding-left: 10px;
min-height: 350px;
height: 100%;
}
@@media screen and (min-width: 150px) and (max-width: 480px) {
.control-section {
margin-bottom: 30px;
}
.control-wrapper {
margin-bottom: 0px;
}
}
</style>
<script>
document.getElementById("normalbtn").addEventListener('click', function () {
var dialogObj = document.getElementById("default_dialog")
dialogObj.ej2_instances[0].show();
});
function dialogClose() {
document.getElementById("normalbtn").style.display = "block";
}
function dialogOpen() {
document.getElementById("normalbtn").style.display = "none";
}
function dlgButtonClick() {
window.open('https://www.syncfusion.com/company/about-us');
}
</script>
</div>