Show CSS verändert

app/assets/stylesheets/galleries.css.scss

@@ -1,6 +1,36 @@
 // Place all the styles related to the galleries controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-modal.fade.in {
+
-  
+.modal.fade {
+    top: -25%;
+    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
 }
+.modal-gallery {
+    max-height: none;
+    outline: medium none;
+    width: auto;
+}
+.modal {
+    color: #333333;
+}
+.hide {
+    display: none;
+}
+.modal {
+    background-clip: padding-box;
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 6px 6px 6px 6px;
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    left: 50%;
+    margin-left: -280px;
+    outline: medium none;
+    position: fixed;
+    top: 10%;;
+    z-index: 1050;
+}
+.fade {
+    opacity: 0;
+    transition: opacity 0.15s linear 0s;
+}

app/views/galleries/show.html.erb

@@ -16,7 +16,7 @@
   <%= @gallery.datum %>
 </p>
 <!-- modal-gallery is the modal dialog used for the image gallery -->
-<div id="modal-gallery" class="modal hide fade modal-gallery modal-fullscreen" tabindex="-1">
+<div id="modal-gallery" class="modal hide fade modal-gallery modal-fullscreen modal-loading" tabindex="-1">
     <div class="modal-header">
         <a class="close" data-dismiss="modal">&times;</a>
         <h3 class="modal-title"></h3>
@@ -49,5 +49,5 @@
 <script src="js/bootstrap-image-gallery.js"></script>
 <script type="text/javascript">
 
-$('#modal-gallery.fade').css('top', '50%');
+//$('#modal-gallery.fade').css('top', '50%');
   </script>