vertical alignment middle for modal

hosting/static/hosting/css/commons.css

@@ -57,6 +57,7 @@
 	    width: 90%;
 	}
 }
+
 /***********Styles for Model********************/
 .modal-content {
     border-radius: 0px;
@@ -64,16 +65,24 @@
     width: 100%;
 	float: left;
 }
-.close {
+
-    font-size: 50px;
+.modal-header {
+	min-height: 25px;
+}
+
+.modal-header .close {
+    font-size: 75px;
     font-weight: 300;
-    }
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    right: 15px;
+}
 .modal-header {
     border-bottom: 0px solid #e5e5e5;
     padding: 0px 15px;
     width: 100%;
-	float: left;
+ }
-	}
 .modal-body {
     text-align: center;
     width: 100%;
@@ -81,7 +90,7 @@
 	padding: 0px 30px 15px 30px;
 }
 .modal-body .modal-icon i {
-    font-size: 50px;
+    font-size: 80px;
     font-weight: 100;
     color: #999;
 }
@@ -93,38 +102,69 @@
     font-family: 'Lato', sans-serif;
 }
 .modal-text {
-    padding-top: 20px;
+    padding-top: 15px;
     font-size: 16px;
 }
 .modal-footer {
     border-top: 0px solid #e5e5e5;
     width: 100%;
-	float: left;
+    float: left;
-	text-align: center;
+    text-align: center;
-	padding: 30px 15px;
+    padding: 15px 15px;
 }
 @media (min-width: 1300px) {
-    .modal-dialog {
+    .modal-dialog {/*     top: 30%; */width: 30%;}
-    top: 30%;
-    width: 25%;
-	}
 }
 @media (max-width: 1299px) {
     .modal-dialog {
-    top: 20%;
+/*     top: 20%; */
     width: 43%;
 	}
 }
 @media (max-width: 900px) {
     .modal-dialog {
-    top: 20%;
+/*     top: 20%; */
     width: 50%;
 	}
 }
 @media (max-width: 767px) {
     .modal-dialog {
-    top: 30%;
+/*     top: 30%; */
     width: 90%;
     margin: 0 auto !important;
 	}
 }
+
+@media(min-width: 320px) {
+   .modal:before {
+     content: '';
+     display: inline-block;
+     height: 100%;
+     vertical-align: middle;
+     margin-right: -4px;
+   }
+ }
+ 
+ 
+ @media (min-width: 768px) {
+   .modal-dialog {
+/*        width: 520px; */
+       margin: 15px auto;
+   }
+ }
+ 
+ .modal {
+   text-align: center;
+ }
+ 
+ .modal-dialog {
+   display: inline-block;
+   text-align: left;
+   vertical-align: middle;
+ }
+ 
+ .modal-content {
+     border-radius: 0;
+     font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+     font-weight: 300;
+ }

hosting/templates/hosting/orders.html

@@ -52,14 +52,17 @@
                                             </button>
                                         </div>
                                         <div class="modal-body">
-                                         <div class="modal-icon"><i class="fa fa-question" aria-hidden="true"></i></div>
+                                            <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete your order?"%}</h4>
-                                            <h4 class="modal-title" id="ModalLabel">{% trans "Cancel Order"%}</h4>
+
-                                               <p class="modal-text">{% trans "Do you want to delete your order?"%}</p>
                                             <form method="post"
                                                   action="{% url 'hosting:delete_order' order.id %}">
                                                 {% csrf_token %}
                                                 <div class="modal-footer">
-                                                    <button type="submit" class="btn btn-danger btn-ok">{% trans "Delete"%}
+                                                    <button type="button" class="btn btn-default"
+                                                            data-dismiss="modal">
+                                                        {% trans "Close"%}
+                                                    </button>
+                                                    <button type="submit" class="btn btn-primary">{% trans "Delete"%}
                                                     </button>
                                                 </div>
                                             </form>