SASS中的纯CSS模态

Question

我试图在SASS中为我的Rails应用重新创建这个纯CSS模式：

http://codepen.io/maccadb7/pen/nbHEg

这是我的SASS

//
// Variables
// ----------------------

$gray: #333
$gray-light: #aaa
$gray-lighter: #eee
$space: 40px
$blue: #428bca
$blue-dark: darken($blue, 5%)

// Mixin for transition/transform
=translate($x, $y) 
  -webkit-transform: translate($x, $y)
  -ms-transform: translate($x, $y)
  transform: translate($x, $y)

=transition($transition) 
  -webkit-transition: $transition
  transition: $transition

=transition-transform($transition) 
  -webkit-transition: -webkit-transform $transition
  -moz-transition: -moz-transform $transition
  -o-transition: -o-transform $transition
  transition: transform $transition



//
// Btn 
// ----------------------

.mbtn
  background: $blue
  border: $blue-dark solid 1px
  border-radius: 3px
  color: #fff
  display: inline-block
  font-size: 14px
  padding: 8px 15px
  text-decoration: none
  text-align: center
  min-width: 60px
  position: relative
  transition: color .1s ease
  margin-bottom: 10px
  /* top: 40em;*/

  &:hover
    background: $blue-dark


  &.mbtn-big
    font-size: 18px
    padding: 15px 20px
    min-width: 100px



.mbtn-close
  color: $gray-light
  font-size: 30px
  text-decoration: none
  position: absolute 
  right: 5px 
  top: 0

  &:hover
    color: darken($gray-light, 10%)




//
// Modal
// ----------------------

.modal


  // This is modal bg
  &:before
    content: ""
    display: none
    background: rgba(0,0,0,.6)
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    z-index: 10


  &:target

    // Active animate in modal
    &:before
      display: block

    .modal-dialog
      +translate(0, 0)
      top: 20%

// Modal Dialog
// ----------------------

.modal-dialog
  background: #fefefe
  //border: $gray solid 1px
  border-radius: 5px
  margin-left: -200px
  position: fixed
  left: 50%
  top: -100%  
  z-index: 11 
  width: 360px
  +translate(0, -500%)
  +transition-transform("3s, ease-out")


.modal-body
  padding: $space/2


.modal-header,
.modal-footer
  padding: $space/4 $space/2


.modal-header
  //border-bottom: $gray-lighter solid 1px

  h2
    font-size: 20px

.modal-footer
  //border-top: $gray-lighter solid 1px
  text-align: right


/*ADDED TO STOP SCROLLING TO TOP*/
#close 
  display: none

这是我的HAML：

        %a.mbtn.mbtn-big{:href => "#modal-one"} Modal!
        #modal-one.modal{"aria-hidden" => "true"}
            .modal-dialog
            .modal-header
                %h2 Modal in CSS?
                %a.mbtn-close{"aria-hidden" => "true", :href => "#close"} ×
                / CHANGED TO "#close"
            .modal-body
                %p One modal example here! :D
            .modal-footer
                %a.mbtn{:href => "#close"} Nice!
                / CHANGED TO "#close"

出于某种原因"aria-hidden" => "true"没有被尊重，并且在页面加载时除了按钮之外还可以看到模态。我在下面列出了一张图片：

当我单击模态按钮时，页面变暗，我无法单击页面上的任何元素。所有的帮助表示赞赏，我不确定我在哪里出错了。谢谢！