Modal vertical align center issue while data come from third party.

- Remove JavsScrip which is useed for modal vertical align center.
- Added css for modal vertical align center.
- Add ".pmd-modal-center" class beside ".modal"

Author: sunil-digicorp

components/modal/css/modal.css

@@ -1,5 +1,6 @@
+
 /*!
- * Propeller v1.0.0 (http://propeller.in)
+ * Propeller v1.0.0 (http://propeller.in): modal.css
  * Copyright 2016-2017 Digicorp, Inc.
  * Licensed under MIT (http://propeller.in/LICENSE)
  */
@@ -23,7 +24,12 @@
 .modal .radio, .modal .checkbox{margin:16px 0;}
 .modal .radio-options > label{padding-left:32px;}
 .modal .list-group.pmd-list-avatar{margin:8px 4px;padding:0}
-.modal .list-group:last-child{margin-bottom:0;}
+.modal.list-group:last-child{margin-bottom:0;}
 
 /* Form css */
 .form-horizontal .form-group{ margin-left:0; margin-right:0;}
+
+/* Modal center */
+.pmd-modal-center { text-align:center; padding:0 !important;}
+.pmd-modal-center:before { content: ''; display:inline-block; height: 100%; vertical-align: middle; margin-right: -4px;}
+.pmd-modal-center .modal-dialog { display:inline-block; text-align:left; vertical-align:middle;}

components/modal/js/modal.js

@@ -1,11 +1,10 @@
+
 /*!
- * Propeller v1.0.0 (http://propeller.in)
+ * Propeller v1.0.0 (http://propeller.in): modal.js
  * Copyright 2016-2017 Digicorp, Inc.
  * Licensed under MIT (http://propeller.in/LICENSE)
  */
 
-// Modal -----------------------------------------------------------------//
-// Reposition when a modal is shown
 function reposition() {
 	var modal = $(this),
 		dialog = modal.find('.modal-dialog');

components/modal/modal.html

@@ -174,7 +174,7 @@ <h2>Propeller Modal</h2>
 										<div class="col-md-4"> 
 											<button data-target="#simple-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Alert</button>
 
-											<div tabindex="-1" class="modal fade" id="simple-dialog" style="display: none;" aria-hidden="true">
+											<div tabindex="-1" class="modal pmd-modal-center fade" id="simple-dialog" style="display: none;" aria-hidden="true">
 												<div class="modal-dialog">
 													<div class="modal-content">
 														<div class="modal-body">
@@ -188,9 +188,9 @@ <h2>Propeller Modal</h2>
 
 										<!-- Alert with title bar -->
 										<div class="col-md-4">
-											<button data-target="#complete-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Alert with title bar</button>
+											<button data-target="#pmd-complete-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Alert with title bar</button>
 
-											<div tabindex="-1" class="modal fade" id="complete-dialog" style="display: none;" aria-hidden="true">
+											<div tabindex="-1" class="modal pmd-modal-center fade" id="pmd-complete-dialog" style="display: none;" aria-hidden="true">
 												<div class="modal-dialog">
 													<div class="modal-content">
 														<div class="modal-header">
@@ -210,9 +210,9 @@ <h2 class="pmd-card-title-text">Use Google's location service?</h2>
 
 										<!-- Alert without title bar -->
 										<div class="col-md-4">
-											<button data-target="#alert-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Alert without title bar</button>
+											<button data-target="#pmd-alert-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Alert without title bar</button>
 
-											<div tabindex="-1" class="modal fade" id="alert-dialog" style="display: none;" aria-hidden="true">
+											<div tabindex="-1" class="modal pmd-modal-center fade" id="pmd-alert-dialog" style="display: none;" aria-hidden="true">
 												<div class="modal-dialog">
 													<div class="modal-content">
 														<div class="modal-body"> Would you like to proceed? </div>
@@ -770,7 +770,7 @@ <h2>Events</h2>
 <script type="text/javascript" src="http://propeller.in/components/textfield/js/textfield.js"></script>
 
 <!-- Propeller modal js -->
-<script type="text/javascript" src="js/modal.js"></script>
+<!--<script type="text/javascript" src="js/modal.js"></script> -->
 
 </body>