时间戳

首页 > 解决方案 > 在 Qualtrics 中更改 jQuery UI 对话框的宽度

javascript - 在 Qualtrics 中更改 jQuery UI 对话框的宽度

问题描述

我正在编写 Qualtrics 中的调查。我想编写一个可点击的按钮，在框中显示一些文本。

我使用的代码是：

在 Qualtrics 调查标题中：

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.4.js">    </script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">    </script>
<script>
        jQuery("[id*='dialog']" ).dialog({ autoOpen: false});  
        jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); });
                            </script>

JS中的具体问题：

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#btn1").click(function() {
jQuery("#dialog").dialog( "option", "modal", true);
jQuery("#dialog").dialog( "open", "width", 500).css({

"padding":"0px"
});
   })
});

问题文本中的 HTML：

<button id="btn1"> BUTTON TEXT </button><br>
<span title="MOD Explanation" id="dialog"> TEXT IN BOX</span>

但是，我无法更改框的宽度。我希望它以 450 像素的最小宽度在屏幕上传播约 60%。

谢谢你的帮助！

最好的，蒂姆

标签： javascripthtmljquerycssqualtrics

解决方案

评论解释了怎么做，不知道是什么Qualtrics.SurveyEngine.addOnload，api在这里：https ://api.jqueryui.com/dialog/

$(document).ready(function() {
  jQuery("#btn1").click(function() {
    jQuery("#dialog").dialog({modal: true, width: "60%", minWidth: 450}); // you need to pass object here docs: https://api.jqueryui.com/dialog/
  })
})
<html>

<head>

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <button id="btn1"> BUTTON TEXT </button><br>
  <span title="MOD Explanation" id="dialog"> TEXT IN BOX</span>
</body>

</html>

推荐阅读