Question

我有一个显示5 div的应用，每个应用都包含特定类型的数据。

我希望能够在模式中显示其中一个div，以便用户可以看到更大尺寸的数据。

这将由位于右上角的按钮触发。

HTML

<div class="ui grid">
    <div class="sixteen wide column center aligned">
        <a href="http://www.meteo.be/meteo/view/fr/65239-Accueil.html" target="_blank" class="ui negative basic button">IRM Website</a>
    </div>
    <div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
        <button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
        <map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
    </div>
    <div class="four wide column smallBox"> <!-- DIV 2 -->
        <button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
        <img />
    </div>
    <div class="four wide column smallBox"> <!-- DIV 3 -->
        <button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
        <img />
    </div>
    <div class="four wide column smallBox"> <!-- DIV 4 -->
        <button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
        <map bassins="vm.bassins" ng-if="vm.bassins"></map>
    </div>
    <div class="four wide column smallBox"> <!-- DIV 5 -->
        <button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
        <map bassins="vm.bassins" ng-if="vm.bassins"></map>
    </div>
</div>
<div class="ui modal"> <!-- The modal -->
    <i class="close icon"></i>
    <div class="header">Data in modal</div>
    <div class="content">
        Here is my content
    </div>
</div>

模态需要显示此javascript

$('.ui.modal').modal('show');

这个想法是每个按钮触发我的控制器内的一个功能

vm.maximizeData = function(){
    $('.ui.modal').modal('show');
}

但是如何在模态中显示正确的div？

Answer 1

正如您的问题所说，您希望动态地将特定点击元素的数据显示到模态中。

使用选择器获取点击功能的parent child
获取您希望以模式显示的相应/ closest / next DIV内容的内容作为更大的数据。
设置模态内容然后显示。

<强> HTML

<div class="mainBox">

<div class="smallBox">
  <button class="buttonAction">Button</button>
  <div class="divContent">Content</div>
</div>

<div class="smallBox">
  <button class="buttonAction">Button</button>
  <div class="divContent">Content</div>
</div>

</div>

<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
    Here is my content
</div>
</div>

<强> Jquery的

$(document).ready(function(){
  //Button click
  $('.mainBox .smallBox .buttonAction').click(function(){
     //Get content near to clicked button
     var contentToSet = $(this).next('.divContent').html();
     //Set the data to be shown in modal
     $('.modal').find('.content').html(contentToSet);
     //Make modal show
     $('.modal').modal('show');
  });
});

仅供参考，这只是一个示例，您可能需要根据需要更改变量名称。

＆＃13;

$(document).ready(function(){
  //Button click
  $('.buttonAction').click(function(){
     //Get content near to clicked button
     var contentToSet = $(this).next('div.divContent').html();
     console.log(contentToSet);
     //Set the data to be shown in modal
     $('.modal').find('.content').html(contentToSet);
     //Make modal show
     //$('.modal').modal('show');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">

<div class="smallBox">
  <button class="buttonAction">Button</button>
  <div class="divContent">Content1</div>
</div>

<div class="smallBox">
  <button class="buttonAction">Button</button>
  <div class="divContent">Content2</div>
</div>

</div>

<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
    Here is my content
</div>
</div>

＆＃13;

在按钮单击时在模态内显示div

1 个答案: