Javascript顯示隱藏div覆蓋與點擊關閉按鈕

-1

我在一個小的幫助後 - 我不是一個偉大的程序員，並且通常可以通過Google搜索找到我的問題的答案，但這次不是！Javascript顯示隱藏div覆蓋與點擊關閉按鈕

我想在網頁上產生一個特定的效果，我正在努力尋找一些基本的JS我可以修改/調整做我需要的東西。

我打算在一個網頁上放置一個由10個圖像組成的圖像，分成兩排，每排五個。每張圖片上方都會有一個「名稱」，下面有一個「職位」。點擊圖片後，我想讓（相關）隱藏div顯示在所有圖片的頂部 - 即左上角與第一張圖片的左上角相匹配。 div將是一個預設的寬度。

在每個div的上角我想要一個簡單的關閉按鈕。

所以，我試圖產生的是可擴展的代碼 - 即理論上它應該沒有關係，只要我得到結構的權利，當你點擊圖像時，它'顯示'正確的隱藏div。

我們已經加載到網頁上的jQuery，所以使用這將是沒有問題的。

任何意見/鏈接片段/指針，將不勝感激！

來源

2014-05-06 James Davies

因此，你想要顯示一個單擊圖像時，所有圖像的div。那些div中的內容呢？他們都是一樣的..？什麼是你現在有這些圖像的HTML結構和CSS ..？ –

@TJ結構可以修改，以適應 - 什麼，我着的正視沿着其中顯示圖像的

Content

行的東西，和隱藏的div保持隱藏，直到圖像被點擊。隱藏的div將包含每個關閉按鈕。 –

除了@Gino Pane的回答，請看看http://jqueryui.com/dialog/ –

這是很簡單的jQuery和jQueryUI的實現。

爲了簡便起見，我只這裏包括5張圖片http://jsfiddle.net/8kefF/2/

HTML：

<div> 
    <div class="clickThisPicture" data-content-id="1"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="2"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="3"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="4"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="5"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
</div> 
<div class="hiddenContent" data-content-id="1">Hidden content 1</div> 
<div class="hiddenContent" data-content-id="2">Hidden content 2</div> 
<div class="hiddenContent" data-content-id="3">Hidden content 3</div> 
<div class="hiddenContent" data-content-id="4">Hidden content 4</div> 
<div class="hiddenContent" data-content-id="5">Hidden content 5</div>

CSS：

.hiddenContent { 
    display:none; 
} 
.clickThisPicture { 
    float:left; 
    border:1px solid #000; 
}

的Javascript：

$(document).ready(function() { 
    $('.clickThisPicture').on('click', function (event) { 
     var contentId = $(this).data('content-id'); 
     $(".hiddenContent[data-content-id='" + contentId + "']").dialog({ 
      modal: true, 
      resizable: false, 
      draggable: false, 
      closeOnEscape: false, 
      dialogClass: "no-close", 
      buttons: { 
       "Close": function() { 
        $(this).dialog("destroy"); 
       } 
      } 
     }); 
    }); 
});

編輯：我更新隱藏缺省值close按鈕的代碼，以便在OP要求可伸縮性時每次銷燬該元素，因此DOM中可能有100個/ 1000個額外元素會導致內存問題。最終。

來源

2014-05-06 11:53:30

這是完美的，謝謝@RobSchmuecker，我會拿那個小提琴並用我自己的格式來調整它。 –

我已經開始玩這個了，並且已經在這個測試頁面上實現了它： http://www.stormforce.biz/test-pages/test-interns.html 我現在遇到的問題是造型的對話框，並定位它，使其從我的第一個圖像的左上角開始（即我希望它覆蓋所有的圖像）。我假設這是設置在JavaScript的某處 - 我已經調用了jQuery和jQuery UI。我該如何改變盒子的外觀和感覺？ –

嗨，詹姆斯，看看你傳遞給對話的「選項」的'position'參數。 http://api.jqueryui.com/dialog/#option-position 它需要一個座標對，所以你必須確保你得到你的第一個圖像的左上角座標，如$（'。clickThisPicture ：first'）。position（）;'或類似的。 –

如果我理解正確，這個jQuery插件將幫助您：plainOverlay

來源

2014-05-06 11:20:06

Javascript顯示隱藏div覆蓋與點擊關閉按鈕

回答

相關問題