feature(EJ2-2363): EJ2-2363 Modal Dialog positioning-Using CSS

Modal Dialog positioning-Using CSS

src/dialog/modal.html

@@ -1,12 +1,9 @@
-<div id="target" class="col-lg-8 control-section">
-    <div class="content-wrapper">
-        <div id="modalDlgWrapper" class="content-wrapper">
-            <button id="dialogBtn" type="button">Open</button>
-            <div id="modalDialog">
-            </div>
-        </div>
+<div id="target" class="col-lg-8 control-section" style="height:350px;">
+    <div style="position:relative; top:10px; left:10px;">
+        <button id="dialogBtn" type="button">Open</button>
+    </div>
+    <div id="modalDialog">
     </div>
-</div>
 </div>
 
 
@@ -31,11 +28,15 @@
         In this demo, we enabled the modal in Dialog and check the "Close on overlay click" option if you want to close the Dialog
         on overlay click.
     </p>
-    <p>More information on the modal behavior of dialog can be found in this 
+    <p>More information on the modal behavior of dialog can be found in this
         <a target="_blank" href="http://ej2.syncfusion.com/documentation/dialog/getting-started.html#modal-dialog">
         documentation section</a>.</p>
 </div>
 <style>
+    #target .control-wrapper {
+        margin: 0px;
+    }
+
     @media screen and (min-width: 150px) and (max-width: 480px) {
         .control-section {
             margin-bottom: 30px;