使用表单数据动态设置模态文本？ [复制]

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>

想法是，将modal的标题设置为人名，然后在内容区域中，将列出课程。

有人知道我该怎么做吗？？

我对这一切还很陌生，所以尽可能详细地表示感谢。

谢谢！

编辑：查看下面的 cmets。丹评论了另一个问题的链接，在那里我找到了我想要的东西。如果一个模组可以将此问题标记为重复，那将不胜感激。

Answer 1

我更喜欢以编程方式显示对话框，而不是使用约定（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 提供间距/颜色等。

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

---

注意事项：

1. 似乎有很多代码，但同时打印您的原始 HTML 和修改后的 HTML，差异将立即清晰。请记住，大多数差异都是出于 CSS 样式的目的，它可以在对话框中正确定位内容。

2. jQueryUI 仅用于快速设置按钮样式。但是，代码确实需要 jQuery。不要理会那些坚持必须在 jQuery 之前学习 JS 的 js 顽固分子。不正确。

3. 模态对话框通过创建三个 z 索引来工作。除了 #overlay 和 #modal-dialog 之外的所有内容都处于默认 z-index 1。覆盖在其上方，值为 5。因此，当覆盖可见时，其他所有内容都在覆盖之下，无法单击.最后，模态对话框位于叠加层之上。

4. 此$('[id^=s-]') 表示ID 以 s- 开头的任何元素。请注意，ID 不能以数字开头，并且前缀 s- 提供了一些用于选择锚标记的内容。一旦您进入点击事件，$(this) 就是刚刚点击的任何元素。所以，$(this).attr('id'); 是刚刚被点击的元素的 ID。您还可以通过 split（拆分）来隔离数字部分，如下所示：var num = $(this).attr('id').split('-')[1];

5. 包含关于 JavaScript 已死的顶级文章 只是因为它很好地解释了 jQuery 是什么以及为什么它（非常）有用。 JavaScript 没有死了，正如作者在一个较新的博客条目中所承认的那样。