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:
">https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
| OO 01.1 | In which country does your organisation reside? |
|---|
