0

私はこのページを持っています: http://test.actful.com/demo/actfulhome-hovertile2.html

このページには画像がタイル表示されており、カーソルを合わせると、各タイルにいくつかのアイコンが表示されます。背景へのリンクがあり、各アイコンには独自のリンク (現在は "#" のみ) があります。背景へのリンクはモーダルを開き、ページを表示します。現在、アイコンをクリックすると、バックグラウンド リンクが有効になり、モーダルが開きます。アイコンのリンクがクリックされたときにバックグラウンド リンクが有効になるのは望ましくありません。どうすればこれを達成できますか。背景の z-index プロパティを低く設定し、アイコンの z-index プロパティを高く設定しようとしましたが、問題は解決しませんでした。この問題を解決するにはどうすればよいですか?

HTML ページのソースを表示できますが、もう少し具体的に説明させてください。

各タイルのコードは次のとおりです。

    <div class="contenthover actfulModalButton">
                  <div>
                    <div class="four columns icon-align-center align-left"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulFBIcon.svg" alt="Face Book"/></a></div>
                    <div class="four columns icon-align-center align-center"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulKangarooIcon.svg" alt="Actit"/></a></div>
                    <div class="four columns icon-align-center align-right"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_actfulCommentsIcon.svg" alt="Comments"/></a></div>
                  </div>
                  <div class="button-bottom">
                    <button data-act-itemid="100" class="small button actfulModalButton">View Details</button> 
                  </div>
                </div>

下部の jquery コードに続く jquery は、ページの読み込み時に「actfulModalButton」(親背景 div) のリンクを作成します。

     $(".actfulModalButton").click(function() {      
     var itemid = $(this).attr('data-act-itemid');
     $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid);
     $("#actItemModal").reveal();   
   });

これが役立つことを願っています。

ありがとう、

4

1 に答える 1

0 
$(".actfulModalButton").click(function(event) {
  event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
  var itemid = $(this).attr('data-act-itemid');
  $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid);
  $("#actItemModal").reveal();   
});

[アップデート]

私は今あなたが何を望んでいるのか理解しています。

以下を追加するだけで、コードは変更されません。

$(".actfulModalButton a.tile-icon-link").click(function(event) {
  event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 
});
于 2013-01-07T09:57:20.317 に答える