显示前一个div，但是取下文档的流程

-1

显示div之前写入（位置：相对），但是取消了文档的流动 - 因此它不会影响其他div流并且行为像弹出。如何实现它？显示前一个div，但是取下文档的流程

      *EDIT:*

HTML

<a href="#" class="menu item colaborate">Colaborate</a> 
<div class="colab-box hide"> 
    <textarea rows="10" name="comment" class="colab-input"id="comment </textarea> 
    <button class="send-colab">Colaborate</button> 
</div><!--colab-box -->

JQUERY：

$(document).ready(function() {  
    $('.colaborate').click(function(e) { 
     $('.colab-box').toggle(); 
     e.stopPropagation(); 
}); 
$(document.body).click(function() { 
    $('.colab-box').hide(); }); 
    $('.colab-box').click(function(e) { 
     e.stopPropagation(); 
    }); 
});

CSS：

.colab-box{ 
    position:relative; 
    top:0; 
    left: 76%; 
    border: 1px solid grey; 
    border-bottom-right-radius: 5px; 
    width:23%; 
    border-bottom-left-radius: 5px; 
    background:#fff; 
}

正如你所看到的，点击colab-box被切换 - 但是由于它是相对定位的，它会占用一些空间并且会影响其他元素的顺序。如果我把它放在绝对位置 - 那么我不知道在哪里弹出，因为我需要弹出“合作”按钮。

来源

2016-04-15 Donalda Donalda

你做了到现在什么？并添加一点点代码来解决问题。 –

请澄清您的具体问题或添加其他详细信息，以确切地突出显示您的需求。正如目前所写，很难确切地说出你在问什么。 –

这不是代码编写服务请添加一个MCVE http://stackoverflow.com/help/mcve – Aaron

如果您不希望代码影响页面中的其他元素，则需要使用“绝对”位置之类的内容覆盖弹出窗口。如果你在两个元素周围放置一个容器并将它设置为'相对'，那么你可以将弹出设置为'绝对'并给它一个特定的左值。这意味着你必须在按钮上设置一个固定的宽度。

$(document).ready(function() { 
 
    $('.colaborate').click(function(e) { 
 
    $('.colab-box').toggle(); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document.body).click(function() { 
 
    $('.colab-box').hide(); 
 
    }); 
 
    $('.colab-box').click(function(e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

.container { 
 
    position: relative; 
 
} 
 
.menu.item.colaborate { 
 
    float: left; 
 
    width: 80px; 
 
    background: #ccc; 
 
} 
 
.colab-box { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 80px; 
 
    border: 1px solid grey; 
 
    border-bottom-right-radius: 5px; 
 
    width: 23%; 
 
    border-bottom-left-radius: 5px; 
 
    background: #fff; 
 
}

<div class="container"> 
 
    <a href="#" class="menu item colaborate">Colaborate</a> 
 
    <div class="colab-box hide"> 
 
    <textarea rows="10" name="comment" class="colab-input" id="comment"></textarea> 
 
    <button class="send-colab">Colaborate</button> 
 
    </div> 
 
    <!--colab-box --> 
 
</div>

来源

2016-04-15 11:01:33 JustinChev

显示前一个div，但是取下文档的流程

回答

相关问题