Question

我有4个div标签。对于每个我已经添加了一个类属性作为项目，我有每个div有大约2个span标签..我需要点击弹出...在那个pop我需要得到div我点击的消息

例如：

<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>

如果我点击了 这是帖子2 的div，我需要弹出该消息

Answer 1

在jQuery UI库中使用jQuery.dialog()：

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

快速演示：jsfiddle demo

Answer 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

Answer 3

你会想要这样的东西：

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

请参阅forked fiddle了解演示。

更新：我已经更新了使用jQuery UI对话框的小提琴。您需要为您的代码添加jQuery-UI的正确样式表。

Answer 4

您需要将click事件侦听器添加到项类：

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

当发生此单击时，您需要在单击元素的上下文中找到具有类postname的元素：

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

然后创建一个弹出对话框，创建一个新的div（如果需要，可以使用postname）并设置必要的文本和调用对话框创建功能。

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

这是完整的样本（所有这些在一起）： http://jsfiddle.net/a9tZx/7/

jQuery UI css文件现在似乎不适用于小提琴，因此您需要将必要的文件添加到项目中以使其看起来漂亮。

div弹出jquery

4 个答案: