ControlC Pastebin - The easiest way to host your text

Paste content

Up to 100 KB of text. BBCode formatting is supported.
Title - optional
Content
<!-- \r\n  *** Qualtrics Popup Template ***\r\n  Instructions:\r\n  1. Replace all instances of 'UNIQUE_ID' with a unique identifier for each question \r\n     (e.g., 'q1_popup'). This ID must be unique \r\n     across all popups used in the survey.\r\n  2. Replace the placeholder text '[click here for context...]' with the appropriate link text.\r\n  3. Replace the placeholder text 'Popup Title - Context' with the actual title for the popup.\r\n  4. Replace the placeholder paragraph '<p>Placeholder context paragraph...</p>' with the actual \r\n     contextual information you want to display in the popup.\r\n  5. Copy and paste this entire block (including the <script> tags) into the HTML view \r\n     of the Qualtrics question where you want the popup link to appear.\r\n-->\r\n<!-- Start of self-contained popup code for Qualtrics Question -->\r\n<div id=\"UNIQUE_ID_wrapper\" style=\"all: initial;\"> <!-- Reset styles for the wrapper -->\r\n  <hr style=\"border: none; border-top: 1px solid #000000; margin: 10px 0 8px 0; width: 100%; box-sizing: border-box;\">\r\n  <br>\r\n  <p style=\"font-size: 16px; margin: 0; padding: 0; line-height: normal; font-weight: normal;\"> <!-- Reset paragraph styles -->\r\n    [<a href=\"javascript:void(0)\" onclick=\"document.getElementById('UNIQUE_ID_modal').style.display='block'\" style=\"font-size: 16px; color: blue; text-decoration: underline; background: none; border: none; padding: 0; margin: 0;\">[click here for context...]</a>]\r\n  </p>\r\n\r\n  <div id=\"UNIQUE_ID_modal\" style=\"display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); font-family: sans-serif; /* Use sans-serif like popup3 */ box-sizing: border-box;\"> <!-- Added box-sizing and font-family -->\r\n    <div style=\"margin:10% auto; width:80%; max-width:800px; background:#fff; border-radius:5px; box-shadow:0 4px 8px rgba(0,0,0,0.2); border: 1px solid #ccc; box-sizing: border-box;\"> <!-- Added border and box-sizing -->\r\n      <div style=\"padding:15px; border-bottom:1px solid #e9ecef; display:flex; justify-content:space-between; align-items:center; box-sizing: border-box;\"> <!-- Added box-sizing -->\r\n        <h2 style=\"font-size:1.4rem; margin:0; font-weight:bold; line-height: 1.2;\">Popup Title - Context</h2> <!-- Added line-height -->\r\n        <button onclick=\"document.getElementById('UNIQUE_ID_modal').style.display='none'\" style=\"font-size:1.5rem; font-weight:bold; cursor:pointer; background:none; border:none; padding: 0; line-height: 1; color: #000;\">&times;</button> <!-- Added padding, line-height, color -->\r\n      </div>\r\n      <div style=\"padding:20px 30px; font-size:14px; line-height: 1.4; box-sizing: border-box; max-height: 60vh; overflow-y: auto;\"> <!-- Added max-height and overflow-y -->\r\n        <!-- === START Placeholder Content === -->\r\n        <p style=\"text-indent:2em; font-size: inherit; line-height: inherit;\">Placeholder context paragraph. Replace this text with the actual content you want to display inside the popup window. You can use standard HTML tags like &lt;strong&gt;, &lt;em&gt;, &lt;ul&gt;, &lt;li&gt;, etc., within this section.</p>\r\n        <!-- === END Placeholder Content === -->\r\n      </div>\r\n      <div style=\"padding:15px; border-top:1px solid #e9ecef; text-align:right; box-sizing: border-box;\"> <!-- Added box-sizing -->\r\n        <button onclick=\"document.getElementById('UNIQUE_ID_modal').style.display='none'\" style=\"color:black; background-color:#95CCCC; border:1px solid #95CCCC; padding:6px 12px; border-radius:4px; cursor:pointer; font-size: 14px; /* Use px */ line-height: normal;\">Close</button> <!-- Changed font-size to px, added line-height -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<script type=\"text/javascript\">\r\n// Ensure this runs only once per unique ID and targets the correct modal\r\nif (!window.UNIQUE_ID_listener_added) {\r\n  // Use a closure to capture the current UNIQUE_ID\r\n  (function(uniqueId) {\r\n    window.addEventListener('click', function(e) {\r\n      var modal = document.getElementById(uniqueId + '_modal');\r\n      // Check if modal exists and the click was outside the modal content\r\n      if (modal && e.target == modal) {\r\n        modal.style.display = 'none';\r\n      }\r\n    });\r\n    // Set a flag specific to this unique ID\r\n    window[uniqueId + '_listener_added'] = true; \r\n  })('UNIQUE_ID'); // Immediately invoke the function with the current UNIQUE_ID\r\n}\r\n</script>\r\n<!-- End of self-contained popup code -->
Password
Anyone with the link will still need this password to view.
Expires