You could still leave the emergency details in text-display questions (for ease of editing) and insert those questions into modals.
Place your text-display questions directly after the list-radio and place this script in the source of the list-radio:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Insert the modals
$('input:radio', thisQuestion).each(function(i) {
$('body').append('<div class="modal inserted-modal fade" id="inserted-modal-'+i+1+'" aria-hidden="true" data-backdrop="static" data-keyboard="false">\
<div class="modal-dialog" role="document">\
<div class="modal-content">\
<div class="modal-body"></div>\
<div class="modal-footer">\
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\
</div>\
</div>\
</div>\
</div>');
$('#inserted-modal-'+i+1+' .modal-body').append($(thisQuestion).nextAll('.boilerplate:eq('+i+')').find('.question-text'));
});
// Remove the text-display questions
$(thisQuestion).nextAll('.boilerplate:lt('+$('input:radio', thisQuestion).length+')').remove();
// Listeners on the radios
$('input:radio', thisQuestion).on('click', function(e) {
var thisIndex = $(this).closest('.answer-item').index();
$('#inserted-modal-'+thisIndex+1+'').modal('show');
});
});
</script>
Having said that, you could also place the emergency details directly in the list-radio question and hide/show them depending on which radio is clicked. (I would do that via JavaScript to avoid problems with the editor destroying HTML tags in Expression Manager strings)
Code:
<p>Some question text...</p>
<p class="conditional-text" style="display:none; color:red;">Conditional text for option 1...</p>
<p class="conditional-text" style="display:none; color:orange;">Conditional text for option 2...</p>
<p class="conditional-text" style="display:none; color:#CDCD00;">Conditional text for option 3...</p>
<p class="conditional-text" style="display:none; color:green;">Conditional text for option 4...</p>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Listeners on the radios
$('input:radio', thisQuestion).on('click', function(e) {
$('.question-text .conditional-text', thisQuestion).hide();
var thisIndex = $(this).closest('.answer-item').index();
$('.question-text .conditional-text:eq('+thisIndex+')', thisQuestion).fadeIn(300);
});
});
</script>
Here is a sample survey showing both of those methods:
