Javascript/Jquery Pop-up - nur ein Pop zu einer Zeit öffnen

Question

Ich habe 3 separate Skripte für 3 Pop-ups, Im sicher gibt es eine bessere Möglichkeit, diese in ein Skript zu strukturieren? Ich möchte auch nur jeweils ein Popup öffnen können. Wenn .popup-new aktiv ist und ich auf .popup-new-b klicke, wird .popup-new automatisch geschlossen. Jede Hilfe würde sehr geschätzt werden.

<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

Da ich nicht Ihre HTML sehen. Ich habe einige mit CSS hinzugefügt. Ich hoffe, dass Sie das suchen. Natuerlich kann ich klären gefragt habe, aber ich habe nicht genug Ruf hinzufügen Kommentar :(

$('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>

Answer 2

Man könnte so etwas tun:

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(); 
} 

Im Allgemeinen ist es eine gute Idee, Arrays oder Objekte zu verwenden, wenn Sie sich wiederholenden Code, den Sie Faktor wollen haben.

Beachten Sie, dass die Übergabe von Parametern an einen Ereignishandler nur mit jQuery funktioniert; In rohem JavaScript müssen Sie Closures verwenden.

Sie können sogar beide Blöcke von drei Zeilen vereinfachen, indem Sie ein anderes Array und eine andere Schleife verwenden (siehe unten).

Beachten Sie auch, dass als @ 404UserNotFound schrieb, wenn alle Ihre Pop-ups eine gemeinsame Klasse gemeinsam nutzen, können Sie diese Linien vereinfachen können:

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

und machen sie zu:

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

Welche Sie verlässt mit diesem kompakten Code:

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(); 
} 

Und schließlich, wenn alle Ihre Popups und Trigger immer sind die gleiche Art und Weise, mit einem Suffix genannt, können Sie es sogar noch weiter verdichten könnte (mit ein paar mehr Tricks, um Platz zu sparen):

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>