通过 Javascript 将内容传递给模态

Question

我在将数据从 javascript 模式传递到 bootstrap 模式时遇到问题。我的代码如下：

模态：

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                     <p id="text_from_js"> </p>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Bağla</button>
            </div>
        </div>
    </div>
</div>

我的table:

<td align="center" class="comment more">2. Lorem ipsum dolor sit amet, cibo neglegentur ea vis. Mea ut ipsum tincidunt moderatius, eu quo dolorum inermis senserit. Meis zril copiosae nam ea, ea per dico cetero. Sea natum tation feugait ea. Sea te facete dicunt, ei soleat iuvaret omnesque mea. Nam ut tantas atomorum honestatis, no nam saepe quaestio. Te animal ocurreret conclusionemque est
                             </td>

和javascript代码

$(document).ready(function() {
var showChar = 50;
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

  var c = content.substr(0, showChar);
  var h = content.substr(showChar-1, content.length - showChar);

  var html = c;

  $(this).html(html);
}
});

$('.more')
        .append('<a href="#myModal" style="font-weight: bold;" data-    toggle="modal">&nbsp; &hellip;</a>')
        .click(function() {
            document.getElementById("text_from_js").innerHTML = content;
        });
});

我如何将内容传递给 id 为 text_from_js 的模式？

Answer 1

不太确定我是否理解所有内容，但尝试为 table 字段提供数据属性。

<td align="center" class="comment more" data-id="1" > ... </td>

您可以通过

传递 ID

$('.more').click(function() {
    alert( $(this).attr('data-id') );
});

或者如果您只想将文本传递给模态窗口。

$('.more')
        .append('<a href="#myModal" style="font-weight: bold;" data-toggle="modal">&nbsp; &hellip;</a>')
        .click(function() {
            $("#text_from_js").html( $(this).html() );
        });
});

更新：

$(document).ready(function() {
var showChar = 50;
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

  var c = content.substr(0, showChar);
  var h = content.substr(showChar-1, content.length - showChar);

  var html = c;
  /* Store the full content to data-content */
  $(this).data('content', $(this).html() );

  $(this).html(html);
}
});

$('.more')
        .append('<a href="#myModal" style="font-weight: bold;" data-    toggle="modal">&nbsp; &hellip;</a>')
        .click(function() {
            /* Get the full content from the data-attribute */
            document.getElementById("text_from_js").innerHTML = $(this).data('content');
        });
});

通过 Javascript 将内容传递给模态

Pass content to modal via Javascript

javascript

jquery

bootstrap-modal