同一页面中有多个响应式弹出窗口

时间：2017-05-31 15:44:19

标签： popup responsive popupwindow

我正在尝试在我的页面中添加两个响应式弹出窗口，但由于我是javascript的新手，我无法弄清楚如何修改此代码以使其适用于两者。到目前为止只有一个有效。

的HTML 

<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>

<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">&times;</span>
</div>

的CSS 

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }

body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;

.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
}
}

p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}


.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;

> div {
    border-radius: 10px;
    position: fixed;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
    padding: 30px 15px;
    /* Width of popup can be changed */
    width: 70%;
    max-width: 600px;
    z-index: 5001;
    @include transform(translate(-50%, -50%));
    left: 50%;
   top: 50%;
    text-align: center;
    border: 5px solid #9AD3DE;
}
}

.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

 .popup > div {
border-radius: 10px;
 position: fixed;
 background: #FFFFFF;
 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
 padding: 30px 15px;
  /* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}

.popup-btn-close { 
position: absolute;
background-color: #f28920;
 color:white;
 top: -15px;
 right: -15px;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 line-height:30px;
 text-align:center;
 font-size:20px;
 font-weight:bold;
 font-family:'Arial Black', Arial, sans-serif;
 cursor:pointer;
 -webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
   -moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
   box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}

.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}


# Javascript#

function popupOpenClose(popup) {

/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
    $(popup).wrapInner("<div class='wrapper'></div>");
}

/* Open popup */
$(popup).show();

/* Close popup if user clicks on background */
$(popup).click(function(e) {
    if ( e.target == this ) {
        if ($(popup).is(':visible')) {
            $(popup).hide();
        }
    }
});

/* Close popup and remove errors if user clicks on cancel or close 
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
    if ($(".formElementError").is(':visible')) {
        $(".formElementError").remove();
    }
    $(popup).hide();
});
}

$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
    popupOpenClose($(".popup"));
});
});

这是我的codepen Codepen

非常感谢你的帮助。 非常感谢你！ krystel

1 个答案:

答案 0 :(得分：0)

这是一种拥有单独弹出窗口的方法。我添加了另一个弹出div，给了它们唯一的id，然后在触发器上创建了一个data-target属性。我更改了触发器以处理具有弹出触发器类的所有内容，然后对包装器代码进行了调整，以便它在当前弹出窗口中创建一个包装器，而不是检查是否存在任何包装器。

还存在内存泄漏，因为每次打开弹出窗口时，都会附加更多事件处理程序，而不是仅附加一次。我强烈建议你重做它们，以避免出现问题。将它们转换为文档上的全局事件而不是每个弹出窗口。我没有在下面更改它们，因为我想要一个最小的更改集，以便您可以看到您的问题所需的内容。

＆＃13;
＆＃13; 
0
＆＃13; 
function popupOpenClose(popup) {

  /* Add div inside popup for layout if one doesn't exist */
  if ($(".wrapper", popup).length == 0) {
    $(popup).wrapInner("<div class='wrapper'></div>");
  }

  /* Open popup */
  $(popup).show();

  /* Close popup if user clicks on background */
  $(popup).click(function(e) {
    if (e.target == this) {
      if ($(popup).is(':visible')) {
        $(popup).hide();
      }
    }
  });

  /* Close popup and remove errors if user clicks on cancel or close buttons */
  $(popup).find(".popup-btn-close").on("click", function() {
    if ($(".formElementError").is(':visible')) {
      $(".formElementError").remove();
    }
    $(popup).hide();
  });
}

$(document).ready(function() {
  $(".popup-trigger").on("click", function() {
    var target = $(this).data('target');
    popupOpenClose($(target));
  });
});
＆＃13; 
/* this was actually some kind of LESS or SASS/SCSS originally.
   I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.popup-trigger {
  display: block;
  margin: 0 auto;
  padding: 20px;
  max-width: 260px;
  background: #4EBD79;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 24px;
  cursor: pointer;
}

body {
  background-color: #E3E3E3;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 240px;
  text-align: center;
}

h1,
p,
h2,
button {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
}

h1 {
  font-size: 40px;
  text-align: center;
  color: #666666;
  margin: 0 0 30px 0;
}

p {
  color: #666666;
  margin: 30px auto;
  text-align: center;
  font-size: 16px;
}

.popup {
  background: rgba(100, 100, 100, 0.6);
  position: fixed;
  display: none;
  z-index: 5000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.popup>div {
  border-radius: 10px;
  position: fixed;
  background: #FFFFFF;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
  padding: 30px 15px;
  /* Width of popup can be changed */
  width: 70%;
  max-width: 600px;
  z-index: 5001;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: left;
  border: 5px solid #f28920;
}

.popup-btn-close {
  position: absolute;
  background-color: #f28920;
  color: white;
  top: -15px;
  right: -15px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Arial Black', Arial, sans-serif;
  cursor: pointer;
  -webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
  box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}

.popup-btn-close:hover {
  background-color: #ac5918;
  color: #fff;
}

.popup-text {
  background: #fff;
  color: #333;
  font-size: 19px;
  line-height: 30px;
  z-index: 9999;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题