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 jsfiddle.net, but when added to Qualtrics, it will not create the modal window. See here for my jsfiddle code (https://jsfiddle.net/luke_pascoe/28c4vzah/32/). 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:

JavaScript:

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

 $('#modal-scroll').modal({

  show: true

 });

});


CSS:

.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;

}


th,

td {

 padding: 5px}

th{

 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;

}



HTML:

<html>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


 <body>


  <table style="width:100%">

   <tr>

    <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>

    </div>

    <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>



        </button>

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


       </div>

       <div class="modal-body">

        <div class="row">

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

          <p>

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

         </div>

        </div>

       </div>

      </div>

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

     </div>

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

    </div>

    <!-- /.modal -->

        <th><img src="https://priassociation.fra1.qualtrics.com/CP/Graphic.php?IM=IM_bOPM05nBthX4uhL" style="width: 60px; height: 23px;" /></th>

   </tr>

  </table>


 </body>


</html>

Answers

  • 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?


    Thanks,

    Luke

Sign In to Comment