모바일 웹 사이트의 각 div 앞으로 펼치기

저는 90 % 너비의 둥근 상자가 세로로 쌓인 모바일 웹 사이트 디자인을 가지고 있습니다. 각 둥근 상자 높이는 동적 콘텐츠로 인해 480px에서 800px까지 다양합니다. 클릭 할 때 팝업이 표시됩니다 ... 팝업 창 높이는 480px에서 800px까지 다양하며 팝업은 해당 둥근 상자의 오른쪽에서 나타납니다. 나는 각 팝업마다 별도의 ID를 부여하고 절대 위치를 지정함으로써이 작업을 수행했습니다. 문제는 모바일 사이트에 팝업이있는 약 38 개의 둥근 상자가 있다는 것입니다. 38 개의 ID를 만들고 각각의 팝업에 CSS 위치를 적용해야했습니다. 더 좋은 방법이 있습니까?모바일 웹 사이트의 각 div 앞으로 펼치기

체크 여기에 바이올린 http://jsfiddle.net/4eLfq4u7/

<div class="rounded_box" id="one"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ducimus tempora deserunt repellat architecto adipisci. Nulla est voluptatem, expedita possimus veniam tempora voluptate inventore eius 
    </p>

출처

2015-01-13 Anoop Chandran

변화 같은 것을 만드는 당신의 HTML :

이

<div class="wrapper"> 
    <div class="roundedBox"></div> 
    <div class="popup"></div> 
</div>

당신의 JS가 그와 같이 작업 할 수 있습니다에 따라

$(".wrapper").click(".roundedBox", function() { 
    $(".popup", this).toggle(); 
});

당신의 절대 위치 지정도 상대적이기 때문에 CSS를 사용하십시오. t, id를 통해 모든 팝업을 배치 할 필요는 없습니다.

근무처 참조 : http://jsfiddle.net/4eLfq4u7/1/

출처

2015-01-13 08:46:04 errand

모바일 웹 사이트의 각 div 앞으로 펼치기

답변

관련 문제