2

我总共有 4 个 div 标签。对于每个我都添加了一个类属性作为项目，因为我为每个 div 大约有 2 个 span 标签。我需要在点击时弹出一个弹出窗口。在那个弹出窗口中，我需要获取我点击的 div 的消息

网址：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

在这里，我已经为上述查询完成了完整的 bins。您可以查看演示链接，如下所示：

演示： 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;
}

查询：

$(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);
});

查看fork fiddle的演示。

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

于 2012-08-06T10:56:01.760 回答
0

您需要将单击事件侦听器添加到项目类：

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

当这个点击发生时，你需要在被点击元素的上下文中找到类 postname 的元素：

$('.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 回答