1

我有一个 CSS 模式，当用户单击我页面上的按钮时会弹出。我使用回帖中的一些信息来生成模态。在生成模态的代码的末尾，我使用：

echo '<script type="text/javascript">location.hash = "#confirm";</script>';

使模态出现。

这在 Chrome、Safari、Firefox、Opera 和 IE10 中非常适合我。但是，在 IE9 中，当我单击按钮时，URL 确实会附加 #confirm 标记，但不会出现模式，并且页面似乎丢失了我的所有 CSS 样式。我不知道我是否遇到了 IE9 错误、我做错了什么，或者它是否与我处理此模式的方法不兼容。

感谢任何建议或见解！

更新一些问题：我使用生成代码的函数呈现模式：

//CONFIRM MODAL
function FUNCTION_confirm_modal($modal_header, $modal_content, $modal_button1, $modal_link1, $modal_button2, $modal_link2)
{
    //BUILD SUBMIT SUCCESS MODAL        
    $confirm_modal = '
    <div id="confirm" class="modal">
    <div>
    <h4 class="warn">'.$modal_header.'</h4>
    '.$modal_content.'
    <fieldset id="modalSubmitAreaRight">
    <a href="'.$modal_link1.'" class="shortButton">'.$modal_button1.'</a><a href="'.$modal_link2.'" class="longButton">'.$modal_button2.'</a>
    </fieldset>
    </div>
    </div>';    

    //RETURN DATA
    return $confirm_modal;
}

然后，在我的内容页面上，我这样做：

print_r($confirm_modal);
echo '<script type="text/javascript">location.hash = "#confirm";</script>';

模态的实际外观/可见性/等由我的 CSS 控制。如果您也需要查看，请告诉我。谢谢！

这是打开/关闭模式的 CSS：

.modal {
position: fixed;
overflow: scroll;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
visibility:hidden;
pointer-events: none;
}

/* SHOW MODAL */

.modal:target {
visibility: visible;
pointer-events: auto;
}

/* MODAL CONTENT */

.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;
-o-animation: minimise 500ms linear;
padding: 30px;
border-radius: 7px;
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
text-shadow: 0 1px 0 #fff;
}

/* MODAL CALL ANIMATION */

.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
}

/* MODAL ANIMATION */

@-webkit-keyframes bounce {
  0% {
-webkit-transform: scale3d(0.1,0.1,1);
-o-transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
-webkit-transform: scale3d(1.08,1.08,1);
-o-transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
-webkit-transform: scale3d(0.95,0.95,1);
-o-transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
-webkit-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
-webkit-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
  }
  100% {
-webkit-transform: scale3d(0.1,0.1,1);
-o-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
-moz-transform: scale3d(0.1,0.1,1);
-o-transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
-moz-transform: scale3d(1.08,1.08,1);
-o-transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
-moz-transform: scale3d(0.95,0.95,1);
-o-transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
-moz-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
-moz-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
  }
  100% {
-moz-transform: scale3d(0.1,0.1,1);
-o-transform: scale3d(0.1,0.1,1);
  }
}
4

0 回答 0