si selecciono más de 5, quiero que aparezca otra página Html como un anuncio para que el usuario anule la selección de uno de los 5 seleccionados
let counter = 0; $('.switched').change(function () { if ($(this).parent().parent().hasClass('clicked')) { $(this).parent().parent().removeClass('clicked'); $(this).parent().parent().addClass('notClicked'); counter--; console.log(counter); } else if (counter == 5) { $("#htmlTemplate").empty(); $("#htmlTemplate").load("popUp.html"); $(".selectedCoins").append(".clicked"); } else if ($(this).parent().parent().hasClass('notClicked')) { $(this).parent().parent().removeClass('notClicked'); $(this).parent().parent().addClass('clicked'); counter++; console.log(counter); } });Es posible que haya malinterpretado su necesidad, pero no necesariamente necesita ir a otra página para cargar un anuncio, especialmente si desea interactuar con el anterior.
let counter = 0; document.querySelectorAll(".select").forEach((e) => { e.addEventListener("click", () => { e.classList.toggle("selected"); if(e.classList.contains("selected")){ counter ++; }else{ counter --; } if(counter == 5){ document.getElementById("ad").classList.remove("d-none") }else{ document.getElementById("ad").classList.add("d-none") } }) }); .select{ display:inline-block; } .select, #ad{ border:1px solid black; width:20px; height:20px; margin:5px; cursor:pointer; } #ad{ background-color:blue; } .selected{ background-color:orange; } .d-none{ display:none; } <div class="select"></div> <div class="select"></div> <div class="select"></div> <div class="select"></div> <div class="select"></div> <div id="ad" class="d-none"></div>Sí, puede agregarlo a través del modal de arranque, por ejemplo, en este enlace,
https://getbootstrap.com/docs/4.1/components/modal/#verticalmente centrado
$('#myModal').modal('toggle')y puedes personalizarlo como quieras.