将数据从其他网址传递到模态

时间:2017-10-24 06:20:47

标签: html twitter-bootstrap-3 bootstrap-modal

我尝试做的是将数据从主页传递到我从其他html调用的弹出页面(模态)。 我想传递的是主要模态中存在的名称和描述。

我的主要

<a href="v?PageId=frmGroupGeneral" data-toggle="modal" data-target="#editGroup">EDIT</a>

<div id="editGroup" class="modal fade text-center">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    </div>
                </div>
            </div>

我的frmGroupGeneral html(模态/弹出式)

<html>
  <head>
  </head>
  <body>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Group Page</h1>
    </div>
    <div class="modal-body">
      <div class="container-fluid text-left">
        <div class="row">
          <div class="col-sm-1">
              <p>Name</p>
          </div>
          <div class="col-sm-11">
              <textarea class="form-control" rows="1" id="textareaName" placeholder="Enter name" maxlength="50"></textarea>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-sm-1">
              <p>Description</p>
          </div>
          <div class="col-sm-11">
              <textarea class="form-control" rows="5" id="textareaDescription" placeholder="Enter description" maxlength="500"></textarea>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

提前致谢。

1 个答案:

答案 0 :(得分:1)

您已在html页面中使用*data属性。您所要做的就是根据您将父html页面中的数据传递到弹出页面的需要添加更多数据 - * id。

例如,

考虑到你的情况,你可以将名称和描述传递给你的模态,

<a href="v?PageId=frmGroupGeneral" data-toggle="modal" data-name="YOUR_NAME_VALUE" data-description="YOUR_DESCRIPTION" data-target="#editGroup">EDIT</a>

在你的模态中,你可以将传入的参数检索为

 var nameValue = $(this).data('name');
 var descriptionValue = $(this).data('description');

要将检索到的值设置为模型中的任何字段,您可以这样做,

 $(".modal-body #textareaName").val(nameValue);
 $(".modal-body #textareaDescription").val(descriptionValue);

希望这有帮助!