2015-09-21 139 views
1

我是1的值傳遞給模態的輸入框,但它不會顯示它引導模態,動態內容負荷

<span class="glyphicon glyphicon-user" class="Add-Dialog" data-id="1" type="button" data-toggle="modal" data-target="#myModal"> </span> 

模態`

<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <p>Some text in the modal.</p> 
    <input type="text" name="help" id="help" value=""/> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

JS

<script> 
$(document).on("click", ".Add-Dialog", function() { 
    var myHelpId = $(this).data('id'); 
    $(".modal-body #help").val(myHelpId); 
}); 

+0

[這](HTTP:// stackove rflow.com/a/32556451/3465753)可能會對您有所幫助。 Upvote如果幫助。 –

+0

繼承人小提琴:http://jsfiddle.net/3kgbG/1013/ – DTH

回答

1
<div class="modal-content" id="myModal"> <!--Add modal id--> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <p>Some text in the modal.</p> 
    <input type="text" name="help" id="help" value=""/> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

Then in js

$('#myModal').on('show.bs.modal', function (event) { 
    var span = $(event.relatedTarget) // Span that triggered the modal 
    var myHelpId = span.data('id') // Extract info from data-* attributes 

    $(this).find("#help").val(myHelpId); 
}) 

參見本實施例中http://getbootstrap.com/javascript/#modals-related-target更多細節