Выберите индивидуальное уникальное диалоговое окно для каждой выбранной опции

Question

Я пытаюсь создать уникальный диалог подтверждения, который появляется для каждой выбранной опции. Однако в настоящее время я устанавливаю его так, что диалог будет отображаться только в том случае, если выбранная опция меньше, чем ранее выбранная опция. Все, казалось, были хорошо на этом фронте, кроме диалогов.

Я заметил, что при появлении предупреждений, когда я перехожу к опции, он подбирает атрибут модели данных для каждой опции, но порой не вызывает правильного диалога. (возможно, придется прокручивать, чтобы увидеть это).

Например, если я выберем опцию Mono - появится предупреждение («bus-output-reduce-width-to-mono»), но это приведет к тому, что в диалоговом окне будет показано «Сменить до стерео».

Варианты разные, но я не могу понять, почему это делается.

Кроме того, было бы хорошо, если опция не изменится, пока вы не нажмете подтверждения (хотя я знаю, что я не смог бы использовать функцию .Кнопкой, но не уверен, что еще нам)

Любой мысли?

HTML

<select class="bus-width btn-light-outline" data-modal="fader-layout-new"> 
    <option value="No Path" data-modal="bus-outputs-remove-bus">No Path</option> 
    <option value="Mono" data-modal="bus-outputs-reduce-width-to-mono" selected="selected" >Mono</option> 
    <option value="Surround" data-modal="bus-outputs-reduce-width-to-stereo">Stereo</option> 
    <option>5.1 Surround</option> 
    </select> 

<div class="overlay"> 

    <a class="cancel">Cancel</a> 
    <a class="confirm">Confirm</a> 

<div class="hide" id="bus-outputs-remove-bus">Remove Bus?</div> 
<div class="hide" id="bus-outputs-reduce-width-to-mono">Reduce to Mono?</div> 
<div class="hide" id="bus-outputs-reduce-width-to-stereo">Reduce to Stereo?</div> 

</div> 

SCRIPT:

var lastIndex = null; 

$('select.bus-width').on('change', function() { 

    var thisIndex = $(this).find(":selected").index(); 
    if(thisIndex < lastIndex){ 
     var myModal = $(':selected').attr("data-modal"); 
     alert(myModal); 
     $('#' + myModal).stop().fadeIn(300); 
     $('.overlay').fadeIn(300); 
    } 

    lastIndex = thisIndex; 

}); 


$('.confirm').click(function() { 
    $('.overlay').hide(); 
}); 

CSS:

.overlay { 
    position:fixed; 
    background:rgba(0,0,0,0.5); 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    text-align:center; 
    display:none; 
    z-index:99999; 
} 
.hide { 
    display:none; 
    position:absolute; 
    width:200px; 
    top:200px; 
    left:50%; 
    margin-left:-200px; 
    background:red; 
} 
.cancel { 
    background:white; 
    position:absolute; 
    top:270px; 
    left:200px; 
    padding:20px; 
} 
.confirm { 
    background:yellow; 
    position:absolute; 
    top:270px; 
    left:270px; 
    padding:20px; 
} 

DEMO: http://jsfiddle.net/susannalarsen/47a21r25/

Answer 1

Пожалуйста, смотрите my fiddle.

Я добавил код ниже, так как я думаю, что вы забыли скрыть другие модалы, прежде чем показывать правильный.

ОБНОВЛЕНО JS

if (thisIndex < lastIndex) { 
     var myModal = $(':selected').attr("data-modal"); 
     alert(myModal); 
     $('.hide').hide(); 
     $('#' + myModal).fadeIn(300); 
     $('.overlay').fadeIn(300); 
    }