1

这是我在 Git 上的插件页面，我在网页中有两个交互式演示。在其中一个演示页面中，我有一个小对话框，当您单击 div 时会打开。

奇怪的问题是，当我单击显示attrchange beta的顶部标题时，此对话框正在打开。仅当第一次单击标题attrchange beta时才会发生这种情况，单击页面中的任何其他元素可解决此问题。

插件页面http://meetselva.github.io/attrchange/ [已修复，使用以下网址查看问题]

http://meetselva.github.io/attrchange/index_so_issue.html

下面是代码，

<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>

<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
  <h4 class="title">Attribute Changer</h4>
  <p>Listed below are the attributes of the div:</p> 
  <div class="attrList"></div>
  <div class="addAttribute text-right"><a href="javascript:void(0)" title="add new attribute">add new attribute</a></div>
</div>

<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
    <h4 class="title">Add/Modify Attribute</h4>
     <p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>    
     <p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
     <div class="clear">&nbsp;</div>
     <button type="button" class="float-right close">Close</button>
     <button type="button" class="float-right update">Update</button>
     <div class="clear"></div>
</div>

JS：

var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
    $attrValue = $('.attrValue', '#addOrmodifyAttr'),
    $attrAMUpdate = $('.update', '#addOrmodifyAttr');

//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
    $attrName.val('').removeClass('nbnbg');
    $attrValue.val('');
    $('#addOrmodifyAttr, #overlay').show();
});
4

3 回答 3

3

弹出窗口正在显示，因为此代码正在运行：

 }).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();

这是因为类 addAttribute 的 DIV 位于标题 DIV 之上。

您可以移动“addAttribute”DIV，或删除该 onclick 函数的最后一行。

于 2013-05-10T15:29:16.800 回答
3

问题是应用于您的#attributeChangerdiv 的 CSS。

如果您查看应用于它的 CSS：

#attributeChanger {
    background-color: #FEFFFF;
    border: 1px solid #4169E1;
    color: #574353;
    font-size: 0.9em;
    margin: 10px;
    min-height: 50px;
    min-width: 150px;
    opacity: 0;
    padding: 2px;
    position: absolute;
    top: -200px;
    z-index: 1;
}

您会注意到位置是absolute，并且它位于您的徽标上方。所以你点击的实际上是你的#attributeChanger div。

#attributeChanger 位置

要修复它，您可以隐藏#attributeChangerusing display: none;，然后$('#attributeChanger').show();在实际视图中使用 jQuery。

于 2013-05-10T15:31:04.730 回答
1

那是因为你的元素是悬停你的标题并检测到他自己的点击并打开（我不知道它为什么打开，我没有检查你的整个代码）。但是当您单击其他任何地方时，您的代码正在改变他的位置，因此它不在标题上方。

最简单的解决方法是将#attributeChangerCSS更改top为 -100px（这是单击文档时的值）或添加display : none.

编辑： Axel 回答显示我所说的“元素是悬停你的标题”。

于 2013-05-10T15:31:27.310 回答