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

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

javascript html

Javascript 打开对话框后如何返回主视图？,javascript,html,Javascript,Html,我有两个html页面应用程序，在第二个页面上，我只使用css打开对话框第一页有一个按钮： <button onClick="redirectToDetails()">Go to details</button> 在第二页，我有按钮Back和按钮“opendialog” JS: 我的对话内容是： <div class="gl-modal" id="modal-one" aria-hidden="true"> <div class="gl-

我有两个html页面应用程序，在第二个页面上，我只使用

css

打开对话框

第一页有一个按钮：

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

在第二页，我有按钮

Back

和按钮“opendialog”

JS:

我的对话内容是：

<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>


CSS中的模态？
这里有一个模态示例！：D

问题：

当我从第一视图转到第二视图并打开对话框时，后退按钮不起作用。它再次打开我的对话框，因为我使用了

window.history.back（）
我尝试了很多方法来清除历史记录，重定向回主页-什么都不管用
如何打开对话框而不记录历史，所以window.history.back（）是否将我转到主视图
有人能帮我解决这个问题吗？
如下声明一个函数
    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>


安古拉斯普朗克
文件。写（“”）；
第二视图








打开对话框
CSS中的模态？
函数openDialog（）{
window.location=“#模式一”
控制台日志（窗口位置）；
}
如下声明一个函数
    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>


安古拉斯普朗克
文件。写（“”）；
第二视图








打开对话框
CSS中的模态？
函数openDialog（）{
window.location=“#模式一”
控制台日志（窗口位置）；
}
在我看来，您应该坚持使用两种技术，而不是将超链接、哈希和手动历史操作混为一谈。在视图之间使用简单的超链接进行导航，在模态中使用哈希链接。这样，标准的浏览器后退按钮甚至可以正常工作
这个版本适合我：
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>


安古拉斯普朗克
文件。写（“”）；
主视图

second-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>


安古拉斯普朗克
文件。写（“”）；
第二视图
打开对话框
CSS中的模态？
这里有一个模态示例！：D
函数openDialog（）{
window.location.hash=“#模式一”
}
在我看来，您应该坚持使用两种技术，而不是将超链接、哈希和手动历史操作混为一谈。在视图之间使用简单的超链接进行导航，在模态中使用哈希链接。这样，标准的浏览器后退按钮甚至可以正常工作
这个版本适合我：
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>


安古拉斯普朗克
文件。写（“”）；
主视图

第二页.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>


安古拉斯普朗克
文件。写（“”）；
第二视图
打开对话框
CSS中的模态？
这里有一个模态示例！：D
函数openDialog（）{
window.location.hash=“#模式一”
}
或者，您可以使用复选框来触发模式，因此您不需要处理哈希问题，因为它不会产生哈希片段，基本上要同时给复选框显示：无
，将标签样式设置为按钮
另外，标签
必须具有才能将
属性绑定到相应的复选框，即使它们之间有其他元素，也可以将其包装，但使用for
可以给您更多的自由度

CSS:
.chkbx、.overlay{
/*隐藏所有覆盖和复选框*/
显示：无；
}
#chk1:已选中#超过1{
/*如果选中复选框chk1，则触发div over1的显示*/
显示：块；
}

HTML:
打开模式-使用标签（仅css）
这是模态的

是的，您可以使用另一个标签来关闭模式，而不需要javascript
接近


只有在复选框#chk1
后面（但不必紧跟其后，其他元素可能在它们之间）出现重叠#chk1
时，才可以使用
中的（您可以改用chk1:checked+#over1
，但#over1
必须紧跟在#chk1
之后，且两者之间没有任何元素）
或者，您可以使用复选框触发模式，这样您就不需要处理哈希问题，因为它不会生成哈希片段，基本上要同时显示复选框<代码>和复选框：无，将<代码>标签样式设置为按钮
另外，标签
必须具有才能将
属性绑定到相应的复选框，即使它们之间有其他元素，也可以将其包装，但使用for
可以给您更多的自由度

CSS:
.chkbx、.overlay{
/*隐藏所有覆盖和复选框*/
显示：无；
}
#chk1:已选中#超过1{
/*如果选中复选框chk1，则触发div over1的显示*/
显示：块；
}

HTML:
打开模式-使用标签（仅css）
这是模态的
<