ikiw/closeBtnDialog.js

## closeBtnDialog.js
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<title>Mobile App in 23 Seconds Example</title>

		<script src="/sapui5/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m,sap.ui.commons"
			data-sap-ui-theme="sap_bluecrystal"></script>
			<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->

		<style>
			.dialogClose{
				overflow : visible !important;
			}
			.dialogClose::after {
				z-index : 15;
				position : absolute;
				left : 98%;
				top : -15px;
				content : url('http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap/ui/ux3/themes/sap_bluecrystal/img/close.png');
			}
			.dialogClose:hover::after {
				cursor : pointer !important;
			}
		</style>
		<script type="text/javascript">

			// create a mobile App
			// it initializes the HTML page for mobile use and provides animated page handling
			var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first

			var fnCloseDialog = function() {
				oDialog.close();
			};

			var oDialog = new sap.m.Dialog("myDialog",{
				modal :"false",
				showHeader : false,
				//horizontalScrolling : false,
				//verticalScrolling : false,
				contentWidth: "500px",
				contentHeight: "150px"
			});
			oDialog.addStyleClass('dialogClose');
			var semanticVersion = new sap.m.Text({text:"Semantic Version"});
			var semanticVesrionInput = new sap.m.Input();

			var comment = new sap.m.Text({text:"Comment"});
			var commentInput = new sap.m.Input();

				var semanticVersionCell = new sap.ui.commons.layout.MatrixLayoutCell({
							content : [ semanticVersion ],
							vAlign : "Middle",
							hAlign : "Right"
		    	});
			    var semanticVesrionInputCell = new sap.ui.commons.layout.MatrixLayoutCell({
							content : [ semanticVesrionInput ],
							vAlign : "Middle",
							hAlign : "Right"
		    	});

				var commentCell = new sap.ui.commons.layout.MatrixLayoutCell({
							content : [ comment ],
							vAlign : "Middle",
							hAlign : "Right"
		    	});
			    var commentInputCell = new sap.ui.commons.layout.MatrixLayoutCell({
							content : [ commentInput ],
							vAlign : "Middle",
							hAlign : "Right"
		    	});

				var basicHeaderLayout = new sap.ui.commons.layout.MatrixLayout({
				columns : 2,
				width : '100%',
				widths : [ '145px', '100%', ]
				});


						  basicHeaderLayout.createRow(semanticVersionCell,semanticVesrionInputCell);
						  basicHeaderLayout.createRow(commentCell,commentInputCell);

						oDialog.addContent(basicHeaderLayout);
			// create the first page of your application
			var page1 = new sap.m.Page("page1", {
				title: "Initial Page",
				content : [new sap.m.Button({   // content is just one Button
					text : "Dialog with header",
					press : function() {
						  oDialog.setShowHeader(true);
						oDialog.open();
					}
				}), new sap.m.Button({   // content is just one Button
					text : "Dialog without header",
					press : function() {
						  oDialog.setShowHeader(false);
						oDialog.open();
					}
				})
						  ]
			});


			app.addPage(page1);

			app.placeAt("content"); // place the App into the HTML document

		</script>

		<script>

			$(document).ready(function(){
				$('body').on('click','#myDialog', function(e) {
					var _width = $(this).width();
					var _offsetX = _width - e.offsetX;
					if((e.offsetY > -5 && e.offsetY <= 12) && (_offsetX >-10 && _offsetX < 10))
					   alert('clicked close button');
					oDialog.close();
		});

			});
		</script>

	</head>
	<body class="sapUiBody">
		<div id="content"></div>
	</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

	<title>Mobile App in 23 Seconds Example</title>

	<script src="/sapui5/resources/sap-ui-core.js"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.m,sap.ui.commons"
	data-sap-ui-theme="sap_bluecrystal"></script>
	<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->

	<style>
	.dialogClose{
	overflow : visible !important;
	}
	.dialogClose::after {
	z-index : 15;
	position : absolute;
	left : 98%;
	top : -15px;
	content : url('http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap/ui/ux3/themes/sap_bluecrystal/img/close.png');
	}
	.dialogClose:hover::after {
	cursor : pointer !important;
	}
	</style>
	<script type="text/javascript">

	// create a mobile App
	// it initializes the HTML page for mobile use and provides animated page handling
	var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first

	var fnCloseDialog = function() {
	oDialog.close();
	};

	var oDialog = new sap.m.Dialog("myDialog",{
	modal :"false",
	showHeader : false,
	//horizontalScrolling : false,
	//verticalScrolling : false,
	contentWidth: "500px",
	contentHeight: "150px"
	});
	oDialog.addStyleClass('dialogClose');
	var semanticVersion = new sap.m.Text({text:"Semantic Version"});
	var semanticVesrionInput = new sap.m.Input();

	var comment = new sap.m.Text({text:"Comment"});
	var commentInput = new sap.m.Input();

	var semanticVersionCell = new sap.ui.commons.layout.MatrixLayoutCell({
	content : [ semanticVersion ],
	vAlign : "Middle",
	hAlign : "Right"
	});
	var semanticVesrionInputCell = new sap.ui.commons.layout.MatrixLayoutCell({
	content : [ semanticVesrionInput ],
	vAlign : "Middle",
	hAlign : "Right"
	});

	var commentCell = new sap.ui.commons.layout.MatrixLayoutCell({
	content : [ comment ],
	vAlign : "Middle",
	hAlign : "Right"
	});
	var commentInputCell = new sap.ui.commons.layout.MatrixLayoutCell({
	content : [ commentInput ],
	vAlign : "Middle",
	hAlign : "Right"
	});

	var basicHeaderLayout = new sap.ui.commons.layout.MatrixLayout({
	columns : 2,
	width : '100%',
	widths : [ '145px', '100%', ]
	});


	basicHeaderLayout.createRow(semanticVersionCell,semanticVesrionInputCell);
	basicHeaderLayout.createRow(commentCell,commentInputCell);

	oDialog.addContent(basicHeaderLayout);
	// create the first page of your application
	var page1 = new sap.m.Page("page1", {
	title: "Initial Page",
	content : [new sap.m.Button({ // content is just one Button
	text : "Dialog with header",
	press : function() {
	oDialog.setShowHeader(true);
	oDialog.open();
	}
	}), new sap.m.Button({ // content is just one Button
	text : "Dialog without header",
	press : function() {
	oDialog.setShowHeader(false);
	oDialog.open();
	}
	})
	]
	});


	app.addPage(page1);

	app.placeAt("content"); // place the App into the HTML document

	</script>

	<script>

	$(document).ready(function(){
	$('body').on('click','#myDialog', function(e) {
	var _width = $(this).width();
	var _offsetX = _width - e.offsetX;
	if((e.offsetY > -5 && e.offsetY <= 12) && (_offsetX >-10 && _offsetX < 10))
	alert('clicked close button');
	oDialog.close();
	});

	});
	</script>

	</head>
	<body class="sapUiBody">
	<div id="content"></div>
	</body>
	</html>