顯示前一個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，但是取下文檔的流程

回答

相關問題