2

私は合計4つのdivタグを持っています。それぞれについて、divごとに約2つのスパンタグがあるという点で、クラス属性をアイテムとして追加しました..クリックするとポップを取得する必要があります..そのポップで、クリックしたdivのメッセージを取得する必要があります

URL : http://jsfiddle.net/varunms/a9tZx/

例:

<div class="item">
    <span class="postname"> This is 1 post </span>
    <span class="decs" >1</span>
</div>

<div class="item">
    <span class="postname"> This is 2 post </span>
    <span class="decs" >2</span>
</div>

This is post 2を持つ div をクリックすると、そのメッセージでポップを取得する必要があります

4

4 に答える 4

5

jQuery UI ライブラリでjQuery.dialog()を使用します。

$(".item").each(function() {
    $(this).bind("click", function() {
        $(this).dialog({
            modal: true
        });
    });
});​​​​​​​​​​​​​​​​​​​

簡単なデモ: jsfiddle デモ

于 2012-08-06T10:56:53.280 に答える
2

ここでは、上記のクエリに対して完全なビンを作成しました。以下に示すように、デモリンクを確認できます。

デモ: http://codebins.com/bin/4ldqp8s

HTML

<div id="panel">
  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        This is 1 post 
      </span>
      <span class="decs" >
        1
      </span>
    </div>
    <span class="postname">
      This is 1 post 
    </span>
    <span class="decs" >
      1
    </span>
  </div>

  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        This is 2 post 
      </span>
      <span class="decs" >
        2
      </span>
    </div>
    <span class="postname">
      This is 2 post 
    </span>
    <span class="decs" >
      2
    </span>
  </div>

  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        This is 3 post 
      </span>
      <span class="decs" >
        3
      </span>
    </div>
    <span class="postname">
      This is 3 post 
    </span>
    <span class="decs" >
      3
    </span>
  </div>

  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        This is 4 post 
      </span>
      <span class="decs" >
        4
      </span>
    </div>
    <span class="postname">
      This is 4 post 
    </span>
    <span class="decs" >
      4
    </span>
  </div>

  <div class="item">
    <span class="postname">
      This is 5 post 
    </span>
    <span class="decs" >
      5
    </span>
  </div>

  <!-- Dialog Box -->
  <div id="boxes">

    <div id="dialog" class="window">
      <div id="title">
        My Dialogue
      </div>
      <div id="msg">
      </div>
      <a href="#"class="close"/>
      Close it
    </a>
  </div>
</div>

<!-- Mask to cover the whole screen -->
<div id="mask">
</div>

CSS:

#mask{
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  opacity:0.5;
  display:none;
}
a{
  color:#333;
  text-decoration:none
}
a:hover{
  color:#ccc;
  text-decoration:none
}
#boxes #dialog{
  padding:0px;
  width:375px;
  height:100px;
  padding:10px;
  bordercolor:1px solid #445cd88;
  background-color:#44bb55;
  display:none;
  position:absolute;
  z-index:99999;
  border-radius: 1.2em;
  -moz-box-shadow:    5px 5px 2px 2px #44fc65;
  -webkit-box-shadow: 5px 5px 2px 2px #44fc65;
  box-shadow:         5px 5px 2px 2px #44fc65;
}
#dialog #title{
  background:#f8a233;
  bordercolor:1px solid #445cd88;
  border-radius: 1.5em;
  margin:0px;
  padding:5px;
}
#dialog #msg{
  margin-left:20px;
  padding:5px;
  font-size:14px;
}
#dialog .close{
  display:block;
  float:right;
  background:#afa1f5;
  bordercolor:1px solid #445cd88;
  border-radius: 1.2em;
  width:100px;
  text-align:center;
  font-size:13px;

}
#dialog .close:hover{
  background:#af55d9;
  bordercolor:1px solid #445cd88;

}
.item {
  background:#0088CC;
  color:#fff;
  margin: 10px;
  border:1px solid #3355a9;
  border-radius: 1.2em;
  padding:10px;
  -moz-box-shadow:    5px 5px 2px 2px #999;
  -webkit-box-shadow: 5px 5px 2px 2px #999;
  box-shadow:         5px 5px 2px 2px #999;
  text-shadow:0 1px 1px #194B7E;
}
div.item:hover {
  cursor:pointer;
  -moz-box-shadow:    inset 3px 9px 32px #afdaf0;
  -webkit-box-shadow:inset 3px 9px 32px #afdaf0;
  box-shadow:         inset 3px 9px 32px #afdaf0;
}
div.item:hover .postname,div.item:hover .decs{
  text-decoration:underline;
}

JQuery:

$(function() {
    $(".item").click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get Dialog Object
        var $dialog = $("#dialog");
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });
        //transition effect     
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        //Set the popup window to center
        $dialog.css('top', winH / 2 - $dialog.height() / 2);
        $dialog.css('left', winW / 2 - $dialog.width() / 2);
        //Set Message
        var MSG = $(this).find(".postname").text().trim() + " " + $(this).find(".decs").text().trim()
        $dialog.find("#msg").html(MSG);
        //transition effect
        $dialog.fadeIn(2000);


    });
    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });
    //if mask is clicked
    $('#mask').click(function() {
        $(this).hide();
        $('.window').hide();
    });

});

デモ: http://codebins.com/bin/4ldqp8s

于 2012-08-06T14:46:28.217 に答える
0

次のようなものが必要です。

$('.item').click(function() {
    var message = $('.postname', $(this)).html();
    alert(message);
});

デモについては、フォークされたフィドルを参照してください。

更新: jQuery UI ダイアログを使用するようにフィドルを更新しました。jQuery-UI の正しいスタイルシートをコードに追加する必要があります。

于 2012-08-06T10:56:01.760 に答える
0

アイテム クラスにクリック イベント リスナーを追加する必要があります。

$('.item').on('click', function() {
});

このクリックが発生したら、クリックされた要素のコンテキストでクラス pos​​tname を持つ要素を見つける必要があります。

$('.postname', this).text();

次に、ポップアップ ダイアログを作成するには、新しい div を作成し (または、必要に応じて postname を使用します)、必要なテキストを設定し、ダイアログ作成関数を呼び出します。

$('<div>').text($('.postname', this).text()).dialog();

これが完全なサンプルです（これらすべてをまとめたものです）： http://jsfiddle.net/a9tZx/7/

jQuery UI css ファイルは現在、fiddle では機能しないようです。そのため、必要なファイルをプロジェクトに追加して、見栄えを良くする必要があります。

于 2012-08-06T11:06:27.330 に答える