主页 / 问题 / 1086679
Accepted
M141
Asked:2020-02-24 16:49:04 +0000 UTC2020-02-24 16:49:04 +0000 UTC

如何解决单击刷新或后退按钮时显示模式窗口（弹出窗口）的问题

  • 772

显示模态窗口（popup）的问题，即： 1）如果你从模态窗口点击链接，然后通过浏览器按钮返回，然后返回页面我们会看到一个空的模态窗口。2）如果在模态窗口打开时，点击刷新（浏览器），那么表单又会变空。

如何使表单在​​刷新时消失，返回页面后不再出现？非常感谢。

为了更清楚，这里是问题的视频： https ://youtu.be/vZROqM37F7k

.popup {   
   position: fixed;
   padding: 10px;
   max-width: 500px;
   border-radius: 0.5em;
   top: 50%;
   left: 50%;
   color: #000;
   transform: translate(-50%, -50%);
   background-color: rgba(255,255,255,1);
   visibility: hidden;
   opacity: 0;
   transition: opacity .5s, visibility 0s linear .5s;
   z-index: 1;
}
.popup:target {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}
.popup .close {
   position: absolute;
   right: 5px;
   top: 5px;
   padding: 5px;
   color: #000;
   transition: color .3s;
   font-size: 2em;
   line-height: 1.5;
   font-weight: 700;
}
.popup .close:hover {
   color: #f00;
}
.close-popup {
   background-color: rgba(0,0,0,.7);
   cursor: default;
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   opacity: 0;
   visibility: hidden;
   transition: opacity .5s, visibility 0s linear .5s;
}
.popup:target + .close-popup {
   opacity: 1;
   visibility: visible;
   transition-delay: 0s;
}

.content button{ 
  display: inline-flex;
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.content button:hover{
  background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}


.block-post {
  width: 100%;
  padding: 5rem;
  background-color: #404F56;
  box-shadow: 0 1.4rem 8rem rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  border-radius: .8rem;
  margin-bottom: 10%;
}
.block-post__img {
  min-width: 35rem;
  max-width: 35rem;
  height: 30rem;
  transform: translateX(-8rem);
  position: relative;
}

.block-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: .8rem;
}

.block-post__img::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(28, 24, 24, 0.8), rgba(128, 134, 116, 0.8));
  box-shadow: .5rem .5rem 3rem 1px rgba(0,0,0,.05);
  border-radius: .8rem;
}
.block-post__date span {
  display: block;
  color: rgba(0,0,0,.5);
  font-size: 1.6rem;
  font-weight: 600;
  margin: .5rem 0;
}

.block-post__title {
  font-size: 2.5rem;
  margin: 1.5rem 0 2rem;
  text-transform: uppercase;
  color: #6d757b;
}

.block-post__text {
  margin-bottom: 3rem;
  font-size: 1.4rem;
  color: rgba(0,0,0,.7);
}

.block-post__cta {
  display: inline-block;
  padding: 1.5rem 3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: #fff;
  background-image: linear-gradient(to right, rgba(28, 24, 24, 0.8), rgba(128, 134, 116, 0.8) 100%);
  border-radius: .8rem;
  text-decoration: none;
}
<html lang="en" ng-app="turtleFacts">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тесты</title>
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
</head>
<body>
    <div class="container">
                      <div class="row">
                          <div class="col-sm-12" ng-repeat="turtle in list.dataJ | filter:list.search"> 
                              <div class="block-post">
                                  <div class="block-post__img">
                                      <img ng-src="{{turtle.image_urlJ}}">
                                  </div>
                                  <div class="block-post__info">
                                      <div class="block-post__date">
                                          <span>...</span>
                                          <span>...</span>
                                      </div>
                                      <h1 class="block-post__title">...</h1>
                                      <p class="block-post__text">...</p>
                                      <a href="#popupW" ng-click="list.changeActiveTurtle(turtle)" class="btn block-post__cta">Узнать подробнее</a> 
                                  </div>
                              </div>
                          </div>
                      </div>    
                    <div id="popupW" class="popup">
                        <a href="mytests.php" class="close">&times;</a>
                        <h2>Текст Текст Текст Текст Текст Текст</h2>
                        <p>Текст Текст Текст </p>
                        <div id="turtle-info" class="content content-1">
                            <form action="mytests.php">
                                <button type="submit">Текст Текст!</button>
                            </form>
                            <form action="test3.php">
                                <button type="submit">Текст!</button>
                            </form>
                        </div>
                    </div>
</div>
</body>
</html>

html

1 个回答

  1. Best Answer

    使用模态窗口的这种实现，您将无法摆脱这个问题。

    可以通过 js/jQuery on show() 和 hide() 实现

    • 1

相关问题