My Modal Pop-Out Window will not appear in Qualtrics

LukePLukeP Community Member Qubie ✭

My Modal Pop-Out Window will not appear in Qualtrics

Hi all!

I'm not proficient at HTML/CSS/JavaScript, but have utilised the three of them in order to produce a modal pop out window in the question text . There is a little info "i" icon I have added in, which when clicked, will cause the modal window to appear with some extra notes to answer the question.

The code I have works in, but when added to Qualtrics, it will not create the modal window. See here for my jsfiddle code ( The code is below. Apologies for the long list, but I would greatly appreciate any assistance with what went wrong.

I have added this to my survey:


$('.launch-scroll').on('click', function(e) {


  show: true




.modal {

  overflow: hidden;


.modal .modal-body {

  height: 500px;

  overflow: auto;


.modal-button {

 border: none;

 padding: 0;

 background: none;


/* LUKE CSS Table Fixed Width */

body {

 padding: 14px;

 text-align: left;

 font-family: Century Gothic;


table {

 width: 100%;

 margin: 20px auto;

 table-layout: auto;


.fixed {

 table-layout: fixed;


table, th, td {

 border: 1px none;

 border-collapse: collapse;



td {

 padding: 5px}


 text-align: left;

 vertical-align: bottom;

 font-size: 15px;


/*determines the width of the table*/

.w {

 width: 400px;


/*adds a border only on the bottom side of the table*/

tr {

border-bottom: 1px solid #ccc;




  <script src=""></script>

  <script src=""></script>

  <link href="" rel="stylesheet" />

  <link href="" rel="stylesheet" />


  <table style="width:100%">


    <th>OO 01.1</th>

    <th>In which country does your organisation reside?</th>

    <div class="page-container">

     <div class="container">

      <br />

      <th><button type="button" class="btn launch-scroll modal-button"><i span class="fa fa-info-circle" ; style="font-size: 1.5vw; color:#0087cd" /></button></th>



    <div class="modal fade" id="modal-scroll">

     <div class="modal-dialog">

      <div class="modal-content">

       <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>


        <h4 class="modal-title">Explanatory Notes</h4>


       <div class="modal-body">

        <div class="row">

         <div class="col-xs-12">


           Please see the definitions tab for guidance on how to categorise your organisation.</p>





      <!-- /.modal-content -->


     <!-- /.modal-dialog -->


    <!-- /.modal -->

        <th><img src="" style="width: 60px; height: 23px;" /></th>






  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭

    Here is another method to achieve your requirement

  • LukePLukeP Community Member Qubie ✭

    Thanks rondev,

    Though it does provide a modal, the style of the above is what I really want. Again, I'm not experienced in these languages, so I trying to reference other works.

    The above works on jsfiddle, but the modal will not activate upon clicking on the icon. I've also tried using the i-frame of the above from jsfiddle, but it isn't responsive. Is there a way to determine why it would work in jsfiddle, but not work in Qualtrics? Or to make the i-frame responsive?



Sign In to Comment