Question

我有2个html页面应用程序，在第二页上我只使用css打开对话框。

第一页有一个按钮：

<button onClick="redirectToDetails()">Go to details</button>

和JS：

function redirectToDetails(){
  window.location = "second-page.html";
}

在第二页上我有按钮Back和按钮＆＃39;打开对话框＆＃39;

JS：

function goBack(){
    window.history.back();
}

function openDialog(){
    window.location = "#modal-one"
}

THE DEMO

我的对话框内容是：

<div class="gl-modal" id="modal-one" aria-hidden="true">
    <div class="gl-modal-dialog">
        <div class="gl-modal-header">
            <h2>Modal in CSS?</h2>
            <a href="#close" class="btn-close" aria-hidden="true">×</a>
        </div>
        <div class="modal-body">
            <p>One modal example here! :D</p>
        </div>
        <div class="gl-modal-footer">
            <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
        </div>
    </div>
</div>

问题：

当我从第一个视图转到第二个视图并打开对话框时，后退按钮不起作用。它会再次打开我对话框，因为我使用window.history.back();

我尝试了很多方法来清除历史记录，重定向回主页 - 没有效果

如何打开对话框并且不记录到历史记录中，因此window.history.back();会将我转到主视图？

有人可以帮我解决这个问题吗？

Answer 1

在我看来，你应该坚持使用两种技术，而不是混淆超链接和散列以及手动历史操作。使用简单的超链接在视图之间导航，并使用模式的哈希链接。这样，标准浏览器后退按钮甚至可以正常工作。

此版本适用于我：

的index.html

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Main view</h1>
    <a href="second-page.html">Second view</a>
</body>
</html>

第二page.html中

<!doctype html>
<html  >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Second view</h1>                       
  <a href="index.html">Back</a>
  <button  onClick="openDialog()" >open Dialog</button>  
  <div class="gl-modal" id="modal-one" aria-hidden="true">
    <div class="gl-modal-dialog">
        <div class="gl-modal-header">
            <h2>Modal in CSS?</h2>
            <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
        </div>
        <div class="modal-body">
            <p>One modal example here! :D</p>
        </div>
        <div class="gl-modal-footer">
            <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
        </div>
    </div>
</div>       

    <script>
      function openDialog(){
        window.location.hash = "#modal-one"
      }
    </script>
</body>
</html>

Answer 2

声明一个函数，如下所示，

    function closeDialog() {
  window.history.back();
}

现在将关闭代码更改为

 <a href="" onclick="closeDialog()" class="btn">Nice!</a>

新的第二个Html文件

  <!doctype html>
 <html  >
   <head>
   <meta charset="utf-8">
   <title>AngularJS Plunker</title>
   <script>document.write('<base href="' + document.location + '" />');</script>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>

   <h1>Second view</h1>
 </br>


   <a  href="javascript:history.go(-1)">Back</a>
   </br>
   </br>
 </br>


 <button  onClick="openDialog()" >open Dialog</button>  


   <div class="gl-modal" id="modal-one" aria-hidden="true">
             <div class="gl-modal-dialog">
                 <div class="gl-modal-header">
                     <h2>Modal in CSS?</h2>
                     <a onClick="closeDialog()" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
                 </div>
                 <div class="modal-body">
                     <p>One modal example here! :D</p>
                 </div>
                 <div class="gl-modal-footer">
                     <a href="javascript:history.go(-1)" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
                 </div>
             </div>



         </div>       




     <script>

       function openDialog(){
       window.location = "#modal-one"
       console.log(window.location);
     }
     </script>      

 </body>
 </html>

Answer 3

或者，您可以使用复选框来触发模态，因此您不需要处理哈希问题，因为它不会产生哈希片段，基本上同时给出复选框display:none，样式为{{1看起来像一个按钮。

同样label必须将label属性绑定到相应的复选框，即使它们之间还有其他元素，它也可以包装它，但使用for会为您提供更多自由。

plunker

CSS：

for

HTML：

.chkbx, .overlay {
  /* hide all overlays and checkboxes */
  display: none;
}
#chk1:checked ~ #over1 {
  /*if checkbox#chk1 is checked, trigger the display of the div#over1 */
  display: block;
}

<label class="btn-label" for="chk1">open modal - using label (css only)</label> <input type="checkbox" class="chkbx" id="chk1"> <div class="overlay" id="over1"> <div class="modal">this is modal <p><a href="#" class="close-btn" id="close1">close</a> and yes you can have another label to close the modal with no need for javascript <p><label class="btn-label" for="chk1">close</label></p> </p> </div> </div>中的 ~ 只有在之后覆盖#chk1:checked ~ #over1 时才会起作用（但在其之后没有必要，其他元素可以在它们之间）复选框#over1，两者都是兄弟姐妹并且拥有相同的父级（您可以使用#chk1代替chk1:checked + #over1 必须在 {之后{1}}之间没有任何元素）

如何在打开对话框后返回主视图？

3 个答案: