Question

我正在制作一个网站，但我遇到了一些麻烦。

在一个页面上有一个名称如下所示的表格：

<table class="table" id="table">
    <thead>
        <tr>
            <th id="name">Teacher</th>
            <th id="courses">Courses</th>
        </tr>
    </thead>
<tbody>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="1">Katherine Crowley</a></td>
    <td>English</td>
</tr>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="2">Seraphine Hamilton</a></td>
    <td>English</td>
</tr>

有更多条目，但这是一个很好的例子。当您单击表格中的名称“Katherine Crowley”时，会打开一个模态，我希望在此处获得有关此人的信息。以下是模态的代码：

<div class="modal" id="myModal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" href="#name"></h4>
    </div><div class="container"></div>
    <div class="modal-body">
      Content
      <br>
      <br>
      <br>
      <p>more content</p>
      <br>
      <br>
      <br>
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div>
</div>

这个想法是模态的标题将被设置为人的名字，然后在内容区域中，将列出课程。

有谁知道我该怎么做？

我对所有这些都相当新，所以尽可能多的细节将会受到赞赏。

谢谢！

编辑：请看下面的评论。 Dan评论了另一个问题的链接，在那里我找到了我想要的东西。如果一个mod可以将这个问题标记为重复，那将是值得赞赏的。

Answer 1

我更喜欢显示对话框programaticaly而不是使用约定（href具有模态容器的ID）。这就是我的工作：

$(".edit-object").click(function () {
     // sets modal's controls
     $("#txtDamageTypeName").val(damageType.Name); // damageType is a JS object
     // shows modal
     $('#mdlEdit').modal('show'); where mdlEdit is the ID of the modal container.
});

我希望它有所帮助。如果您有任何其他疑问，请告诉我。

Answer 2

要根据需要显示对话框，您必须使用javascript（or better yet, jQuery）。

对您的HTML进行了一些更改，主要是通过css进行定位。

jQuery代码使事物出现在应有的位置。

CSS提供间距/颜色/等。

jsFiddle Example

<强> HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<table class="table" id="table">
<thead>
    <tr>
        <th id="name">Teacher</th>
        <th id="courses">Courses</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
        <td>English</td>
    </tr>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
        <td>History</td>
    </tr>
    </tbody>
</table>
<div class="modal" id="myModal">
    <div class="modal-header">
        <div class="header-left">
            <h4 class="modal-title" href="#name"></h4>
        </div>
        <div class="header-right">
            <button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
        </div><!-- .header-right -->
    </div><!-- .modal-header -->
    <div class="container">
        <div class="modal-body">
            <div class="modal-body-inner"></div>
        </div><!-- .modal-body -->
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div><!-- .modal-footer -->
    </div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>

<强> CSS：

th, td{border:1px solid lightgrey;width:150px;text-align:center;}

#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}

.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}

.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}

#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}

<强>的jQuery / JavaScript的：

$('document').ready(function() {
    $('[id^=s-]').click(function(){
        var name = $(this).text();
        var course = $(this).parent().next().text();
        $('.modal-title').html(name);
        $('.modal-body-inner').html(course);
        $('#overlay').show();
        $('#myModal').show();
    });
    $('.close_btn').click(function(){
        $('#overlay').hide();
        $('#myModal').hide();
    });

    $('.btn').button();
}); //END document.ready

注意：

似乎有很多代码，但是打印原始HTML和修订后的HTML，差异将立即显现出来。请记住，大多数差异都是针对CSS样式的，它可以在对话框中正确定位。
jQueryUI仅用于快速设置按钮的样式。但是，代码确实需要jQuery。无视任何坚持你必须在jQuery之前学习js的js偏执狂。不对。
模态对话框的工作原理是创建三个z索引。除了#overlay和#modal-dialog之外的所有内容都是默认的z-index为1.叠加在其上方，值为5.因此，当叠加层可见时，其他所有内容都位于叠加层下方且无法单击。最后，模态对话框位于叠加层上方。
此$('[id^=s-]')表示 ID 以 s- 开头的任何元素。请注意，ID不能以数字开头，前缀s-提供了选择锚标记的功能。进入点击事件后，$(this)是刚刚点击的任何元素。因此，$(this).attr('id');是刚刚单击的元素的ID。您也可以通过拆分（拆分）将数字部分隔离开来，如下所示：var num = $(this).attr('id').split('-')[1];
顶级文章re javascript is dead包含在中只是因为它能很好地解释jQuery是什么以及它为什么（非常）有用。 Javascript 不已死，因为作者已在较新的博客条目中承认。

使用表单数据动态设置模态中的文本？

2 个答案: