Question

我正在寻找在我的网页中实现一个jQuery模式弹出窗口，一个非常简单的弹出窗口。我想在我的索引页面上使用它5次。我已经能够实现它一次但是当我再次尝试使用它时会产生其他锚标记的问题。这是我到目前为止所做的。

<ul>
  <a class="btn" data-popup-open="popup-1" href="#"><li>Contact</li></a>
  <div class="popup" data-popup="popup-1">
    <div class="popup-inner">
      <h2 class="form-text">Thanks for contacting!</h2>
      <div id="contact-form">
        <form id="form-input" action="php/contact.php" method="post">
          <label class="form-text">First Name:</label><input class="input-box" type="text" name="sender1" placeholder="First Name" required> <br>
          <label class="form-text">Last Name:</label><input class="input-box" type="text" name="sender2" placeholder="Last Name" required> <br>
          <label class="form-text">Email:</label><input class="input-box" id="input-box" type="senderEmail" name="email" placeholder="Email" required> <br>
          <label class="form-text" id="message">Message:</label><textarea id="message-box" name="message" rows="12" cols="50" placeholder="Please leave a message" required></textarea> <br>
          <input id="submit-button" type="submit" name="submit">
        </form>
      </div>
      <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
  </div>
</ul>

我的jQuery如下：

$(function() {
    //----- OPEN
    $('[data-popup-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

        e.preventDefault();
    });

    //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
});

我的CSS如下：

/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner, popup-inner2 {
    max-width:700px;
    width:90%;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#545454;
}

/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
}

.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
}

我无法解决的问题是，当我尝试将此实现为另一个锚标记时，它会打开另一个锚标记，它们最终都是同一个东西。我试图改变类名来区分2但无效。如何实现此模式弹出窗口5次，让它在需要的锚标签上工作，而不会影响同一页面上的其他锚标签。

JSFiddle Example

Answer 1

您应该只设置其他数据属性。你做得很好，但我建议这样做，应该更有意义：

＆＃13;

$('[data-popup-open]').each(function(i) {
	var thisLink = $(this);
	var popupName = thisLink.data('popupOpen');
	var openPopup = $('[data-popup="'+popupName+'"]');
	thisLink.on('click', function(e) {
		e.preventDefault();
    	openPopup.fadeIn(350);
	});
	$('[data-popup-close="'+popupName+'"]').on('click', function(e) {
		openPopup.fadeOut(350);
	});
});

＆＃13;

/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner, popup-inner2 {
    max-width:700px;
    width:90%;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#545454;
}

/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
}

.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a class="btn" data-popup-open="popup-1" href="#">Contact</a>
</p>
<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <h2 class="form-text">Thanks for contacting!</h2>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>
<p>
    <a class="btn" data-popup-open="popup-2" href="#">Hallo</a>
</p>
<div class="popup" data-popup="popup-2">
    <div class="popup-inner">
        <h2 class="form-text">How are you doing?</h2>
        <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
    </div>
</div>

＆＃13;

同样在Playground。

请注意：

您应该使用有效的HTML
设置html元素数据属性时，您可以通过以下方式在脚本中使用它：

<div id="test" data-height="30"></div>
var t= document.getElementById('test');
console.log( t.dataset.height ); /* Output: 30 */
console.log( $('#test').data('height') ); /* Output: 30 */

请check this article。

jQuery模态弹出重复

1 个答案: