javascript/Jquery 팝업 - 한 번에 하나의 팝업 만 엽니 다.

Question

3 개의 팝업에 대해 3 개의 별도 스크립트가 있습니다.이 스크립트를 하나의 스크립트로 구성하는 더 좋은 방법이 있습니까? 한 번에 하나의 팝업을 열 수 있기를 원합니다. 따라서 .popup-new가 활성화되어 있고 .popup-new-b를 클릭하여 열면 .popup-new가 자동으로 닫힙니다. 어떤 도움이라도 대단히 감사 할 것입니다.

<script> 
$(document).ready(function() { 
$(".popup-trigger").click(function() { 
$(".popup-new").fadeIn(300); 

}); 

$(".popup-new > span, .popup-new").click(function() { 
$(".popup-new").fadeOut(300); 
}); 
}); 
</script> 

<script> 
$(document).ready(function() { 
$(".popup-trigger-b").click(function() { 
$(".popup-new-b").fadeIn(300); 

}); 

$(".popup-new-b > span, .popup-new-b").click(function() { 
$(".popup-new-b").fadeOut(300); 
}); 
}); 
</script> 

<script> 
$(document).ready(function() { 
$(".popup-trigger-c").click(function() { 
$(".popup-new-c").fadeIn(300); 

}); 

$(".popup-new-c > span, .popup-new-c").click(function() { 
$(".popup-new-c").fadeOut(300); 
}); 
}); 
</script> 

Answer 1

. 일부는 CSS으로 추가했습니다. 나는 이것이 당신이 찾고있는 것이기를 바랍니다. 당연히 나는 명확하게 요청했습니다 수도 있지만 추가 할 수있는 충분한 명성을하지 않아도 코멘트 :(

$('button').click(function(){ 
 
    $('.popup').removeClass('popped'); 
 
    $('#popup-new'+$(this).attr('class')).addClass('popped'); 
 
});

.popup{ 
 
    position:fixed; 
 
    width:70%; 
 
    height:70%; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-5%; 
 
    margin-left:-35%; 
 
    background-color:#ccc; 
 
    z-index:100; 
 
    display:none; 
 
} 
 
.popped{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="popup-new" class="popup">HI I am POPUP NEW</div> 
 
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div> 
 
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div> 
 

 
<button class="">Pop up New</button> 
 
<button class="-b">Pop up New B</button> 
 
<button class="-c">Pop up New C</button>

위의 화기에 I가 팝업 할 수 없습니다 모르지만, 당신의 답변을 공유하기위한

Answer 2

은 당신이 뭔가를 할 수 있습니다 :

popups = ['.popup-new','.popup-new-b','.popup-new,-c'] 

// Pass an additional parameter to popup_click, which is the index of the popup in the array 
$('.popup-trigger').click({popup: 0}, popup_click); 
$('.popup-trigger-b').click({popup: 1}, popup_click); 
$('.popup-trigger-c').click({popup: 2}, popup_click); 

function popup_click(event) { 
    // Here write the code to open the popup 
    // You can access the popup through $(popups[event.data.popup]) 
    for (var i in popups) { 
     if (i != event.data.popup) { // event.data.popup contains the index that we passed 
      // Here write the code to close each of the other popups 
      // Access them through $(popups [i]) 
     } 
    } 
} 

$('html').click(function() { 
    for (var i in popups) { 
     $(popups[i]).hide(); 
    } 
}); 

$('.popup-btn-close').click(function(e) { 
    for (var i in popups) { 
     $(popups[i]).hide(); 
    } 
}); 

$('.popup-new').click(stop_propagation); 
$('.popup-new-b').click(stop_propagation); 
$('.popup-new-c').click(stop_propagation); 

function stop_propagation(e) { 
    e.stopPropagation(); 
} 

일반적으로 배열 또는 당신이 인수 분해 할 반복적 인 코드가있을 때마다 객체를 사용하는 것이 좋습니다.

이 방법으로 이벤트 처리기에 매개 변수를 전달하는 것은 jQuery에서만 작동합니다. 원시 자바 스크립트에서는 클로저를 사용해야합니다.

다른 배열과 루프 (아래 참조)를 사용하면 세 줄의 두 블록을 모두 단순화 할 수도 있습니다.

for (var i in popups) { 
    $(popups[i]).hide(); 
} 

그리고로를 설정 : 당신 잎

$('.yourClassNameHere').hide(); // Will select all the elements of the right class 

또한 404UserNotFound 쓴 @로 팝업 모든 일반적인 클래스를 공유하는 경우, 당신은이 라인을 단순화 할 수 있습니다 이 컴팩트 코드 :

popups = ['.popup-new', '.popup-new-b', '.popup-new,-c'] 
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c'] 

// Pass an additional parameter to popup_click, which is the index of the popup in the array 
for (i in popup_triggers) { 
    $(popup_triggers[i]).click({popup: i}, popup_click); 
} 

function popup_click(event) { 
    // Here write the code to open the popup 
    // You can access the popup through $(popups[event.data.popup]) 
    for (var i in suffixes) { 
     if (i != event.data.popup) { // event.data.popup contains the index that we passed 
      // Here write the code to close each of the other popups 
      // Access them through $(popups [i]) 
     } 
    } 
} 

$('html').click(function() { 
    $('.yourClassNameHere').hide(); 
}); 

$('.popup-btn-close').click(function(e) { 
    $('.yourClassNameHere').hide(); 
}); 

for (i in popups) { 
    $(popups[i]).click(stop_propagation); 
} 

function stop_propagation(e) { 
    e.stopPropagation(); 
} 

마지막으로 모든 팝업과 트리거가 항상 접미사로, 당신이 훨씬 더 (몇 트릭 공간을 저장할와) 응축 수, 같은 방식으로 이름 : 나는 당신의 HTML을 볼 수 없기 때문에

suffixes = ['', '-b', '-c'] 
 

 
for (let i in suffixes) { 
 
    $('.popup-trigger' + suffixes[i]).click(function(i) { 
 
    return function(e) { 
 
     hideAllPopups(); 
 
     $('.popup-new' + suffixes[i]).toggle(); 
 
     //e.stopPropagation(); // HERE 
 
    } 
 
    }(i)); 
 
} 
 

 
$('.popup-btn-close').click(hideAllPopups); 
 
//$('html').click(hideAllPopups); // HERE 
 

 
function hideAllPopups() { 
 
    $('.popup').hide(); 
 
} 
 

 
// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)

.popup { 
 
    margin: 20px auto; 
 
    padding: 20px; 
 
    background: #ccc; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
.popup-btn-close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.box { 
 
    background: rgba(0,0,0,0.2); 
 
    padding: 5px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="box popup-trigger">Trigger popup #1</span> 
 
<span class="box popup-trigger-b">Trigger popup #2</span> 
 
<span class="box popup-trigger-c">Trigger popup #3</span> 
 

 
<hr/> 
 

 
<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div> 
 
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div> 
 
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>