简体   繁体   English

Shadowbox.js隐藏了我的选择输入

[英]Shadowbox.js hides my select inputs

I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution. 我敢肯定我不是第一个遇到这个问题的人,但是我没有运气找到解决方案。

I'm using Shadowbox in its simplest form; 我以最简单的形式使用Shadowbox just doing an image popup with a link like 只是做一个带有类似链接的图像弹出

Click <a href="myimage.png" rel="shadowbox">here</a> to view the image.

This works fine, but has one very odd side effect: When I click the link, all of the select inputs (ie drop-down boxes) of the form on my page disappear. 这很好用,但有一个非常奇怪的副作用:当我单击链接时,页面上表单的所有选择输入(即下拉框)都消失了。 A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden . 通过对Firebug的一番窥探,我们发现CSS已被修改以使<select>标签具有visibility: hidden When the image is dismissed, the inputs reappear. 取消图像后,将重新显示输入。

Not surprisingly, this happens consistently across browsers. 毫不奇怪,这在所有浏览器中都会一致发生。

Since the inputs all reappear, I could probably just leave things as they are. 由于所有输入都重新出现,我可能可以将它们保持原样。 However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. 但是,例如,如果无法加载图像且脚本无法显示图像,则输入保持不可见。 Also, it looks strange and it's driving me batty. 另外,它看起来很奇怪,并且让我发疯。 :D :d

Other factors that may or may not be relevant: 其他可能或可能不相关的因素:

  • I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious. 过去,我对Shadowbox所做的工作很少,很可能会丢失一些令人尴尬的显而易见的内容。
  • My page and its form are generated by CakePHP. 我的页面及其表单是由CakePHP生成的。
  • The page uses jQuery, and Shadowbox is using the jQuery adapter. 该页面使用jQuery,而Shadowbox使用jQuery适配器。
  • The vanishing inputs do not have class attributes. 消失的输入没有 class属性。 They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions. 它们确实具有由CakePHP生成的id属性,但是这些名称非常特定于我的应用程序,因此不太可能导致任何CSS冲突。
  • As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. 据我所知, 所有选择输入都消失了,并且页面上的其他任何元素(输入或其他)都没有受到影响。 (Even the labels associated with the inputs are unaffected.) (即使与输入关联的标签不受影响。)
  • Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3 版本:Shadowbox 3.0.3,jQuery 1.4.2,CakePHP 1.3

This is a semi-bug in shadowbox, most likely. 这很可能是shadowbox中的一个半bug。 The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. 选择标记被隐藏,因为在某些版本的IE中,它们是使用Windows本机控件呈现的,因此始终显示在具有z-index的任何其他元素“上方”。 This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. 对于ShadowBox来说,这显然是一个问题,因此解决方案是在显示框时将其隐藏。 Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them. Shadowbox显然应该只对有问题的浏览器执行此操作,但我认为它们正在采用一种更通用的方法来始终隐藏它们。

Shadowbox.js 打开但不显示简单<div>内容</div><div id="text_translate"><p>我使用 JVectorMap 创建了一个世界<a href="https://jvectormap.com/" rel="nofollow noreferrer">map</a> ,我想使用<a href="https://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox.js</a>打开一个框,显示每个突出显示的国家/地区的各种信息 - 在这个例子中,它特别是 MENA 国家/地区。</p><p> map 有效,弹出窗口有效,但我的 div <div>TEST</div>根本不显示,我收到错误消息: <strong>“它可能已被移动、编辑或删除。”</strong></p><p> 这是我的代码:</p><pre> <,DOCTYPE html> <html lang="en"> <head> <title>jVectorMap</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <link rel="stylesheet" href="jquery-jvectormap-2.0.5:css"> <script src="https.//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery-jvectormap-2.0.5.min.js"></script> <script src="jquery-jvectormap-world-mill-en.js"></script> <script src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox:init({ language, 'en': players, ['iframe';'html'] }): </script> </head> <body> <div id="world-map" style="width; 600px: height, 400px"></div> <script type="text/javascript"> $(function(){ var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE';'YE']. $('#world-map'):vectorMap({ map, 'world_mill_en': zoomMax, 20: backgroundColor, '#505050': regionStyle: { initial: { fill, '#F6F5F4' }: hover: { fill, '#F6F5F4': "fill-opacity", 1 }: selected: { fill, '#7B8B9B' }: selectedHover: { cursor, 'pointer': fill, '#002142' } }: selectedRegions, ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']: onRegionClick, function (event. code) { if($,inArray(code.codes) > -1) { Shadowbox:open({ content, '<div>TEST</div>': title, "MENA": player, "iframe": height, 400: width; 640 }); } } }); }); </script> </body> </html></pre><p> 更进一步,我希望每个代码都有不同的消息,但现在我只想让它工作。</p><p> 任何帮助表示赞赏。</p></div> - Shadowbox.js opening but not display simple <div> content

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Shadowbox.js和Dailymotion视频 - Shadowbox.js and dailymotion videos 如何修改Shadowbox.js - How to modify Shadowbox.js 如何自定义shadowbox.js rev标题? - How to customize shadowbox.js rev caption? 在动态生成的内容上应用Shadowbox.js - Applying Shadowbox.js on dynamically generated content Shadowbox.js 打开但不显示简单<div>内容</div><div id="text_translate"><p>我使用 JVectorMap 创建了一个世界<a href="https://jvectormap.com/" rel="nofollow noreferrer">map</a> ,我想使用<a href="https://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox.js</a>打开一个框,显示每个突出显示的国家/地区的各种信息 - 在这个例子中,它特别是 MENA 国家/地区。</p><p> map 有效,弹出窗口有效,但我的 div <div>TEST</div>根本不显示,我收到错误消息: <strong>“它可能已被移动、编辑或删除。”</strong></p><p> 这是我的代码:</p><pre> <,DOCTYPE html> <html lang="en"> <head> <title>jVectorMap</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <link rel="stylesheet" href="jquery-jvectormap-2.0.5:css"> <script src="https.//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery-jvectormap-2.0.5.min.js"></script> <script src="jquery-jvectormap-world-mill-en.js"></script> <script src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox:init({ language, 'en': players, ['iframe';'html'] }): </script> </head> <body> <div id="world-map" style="width; 600px: height, 400px"></div> <script type="text/javascript"> $(function(){ var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE';'YE']. $('#world-map'):vectorMap({ map, 'world_mill_en': zoomMax, 20: backgroundColor, '#505050': regionStyle: { initial: { fill, '#F6F5F4' }: hover: { fill, '#F6F5F4': "fill-opacity", 1 }: selected: { fill, '#7B8B9B' }: selectedHover: { cursor, 'pointer': fill, '#002142' } }: selectedRegions, ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']: onRegionClick, function (event. code) { if($,inArray(code.codes) > -1) { Shadowbox:open({ content, '<div>TEST</div>': title, "MENA": player, "iframe": height, 400: width; 640 }); } } }); }); </script> </body> </html></pre><p> 更进一步,我希望每个代码都有不同的消息,但现在我只想让它工作。</p><p> 任何帮助表示赞赏。</p></div> - Shadowbox.js opening but not display simple <div> content Shadowbox.js下载html文件,而不是在iframe中显示它们 - Shadowbox.js downloads html files instead of displaying them in an iframe 为移动触摸设备添加图像滑动支持到Shadowbox.js - Add image swipe support for mobile touch devices to Shadowbox.js 如何使用shadowbox.js保存和设置window.pageYOffset - how to save and set window.pageYOffset with shadowbox.js 在 shadowbox.js 中显示依赖于 JVectormap 区域的不同 html 内容 - Display different html content dependant on JVectormap region in shadowbox.js shadowbox.js无法正常运行,只能正常打开一半时间 - shadowbox.js not working, only opening properly half the time
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM