通过Javascript将内容传递给模态

时间:2015-07-26 10:52:03

标签: javascript jquery bootstrap-modal

将数据从javascript传递到bootstrap模式时出现问题。我的代码如下:

模态:

€ ##.###,0.

我的表:

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

和javascript代码

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

如何将内容传递给modal,其中id为text_from_js?

1 个答案:

答案 0 :(得分:0)

不太确定我是否理解了everthing,但尝试给表字段数据属性。

<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');
        });
});