Question

今天我带着jQuery / javascript和.fadeToggle();的问题来找你。

所以我希望P具有id的元素。

请看这里：

$("#here").click(function(){
    $(".overlay, .popup").fadeToggle();
});


$("#there").click(function(){
    $(".overlay, .popup2").fadeToggle();
});

这是我的JSFiddle：

理想情况下，我希望有几个带有单个ID的段落，以便我可以添加一个包含不同内容的弹出窗口！

Answer 1

我通常会使用自定义数据属性来做这样的事情。这样，无论你有多少元素，都可以重复使用相同的功能......

$('.clickable').click(function() {
    var popupTarget = $(this).data('popup');
   $('.overlay, '+popupTarget).fadeToggle();
});

/* click overlay to close... */
$('.overlay').click(function() {
  $('div').fadeOut();
});

html,
body {
    height: 100%;
}
.overlay {
 	position:absolute;
	display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
	left: 0;
    bottom: 0;
    right: 0;
}
.popup, .popup2 {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="overlay"></div>
<div class="popup">Some popup text</div>
<div class="popup2">Hello world!!</div>

<!-- add a class to each element and a data attribute to identify the target element... -->
<p id="here" class="clickable" data-popup=".popup">Click 1</p>

<p id="there" class="clickable" data-popup=".popup2">Click 2</p>

fadeToggle多个id错误

1 个答案: