在模态引导程序中显示远程内容

时间:2015-01-02 11:43:00

标签: javascript ajax twitter-bootstrap

目前我面临的一个问题是无法向模式对话框(bootstrap)显示远程内容。 是否可以将响应内容附加到模态内容?

index.jsp的样本

 <form id="cusPayment" name="cusPayment" method="post" action="CusConfirmPayment.jsp" >   
     <input id="lflag" name="lflag" type="hidden" value="E">

     <a data-toggle="modal"   data-remote="CusConfirmPayment.jsp" href="#"  data-target="#myModal" id='paynow322' class="btn btn-primary btn-large">Load External Page</a>  

 </form> 

    <!-- Modal --> //show the remote content
    <div class="modal fade" id="myModal" class="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" id="modal-dialog">
            <div class="modal-content" id="modal-content">
        </div> 
    </div>

    <script type="text/javascript">
        $(document).ready(function() {      

             $('a#paynow322').click(function(){

                var form  = $("#cusPayment");
                var $modal = $('#myModal');

             $.ajax({

                 type: form.attr('method'),  //post method
                 url: form.attr('action'), //ajaxformexample url
                 data: form.serialize(), // serialize input data values
                 success: function (data) {

                 var result=data; //response content html 

                 $('#myModal').modal({
                      show:true
                 });

3 个答案:

答案 0 :(得分:0)

  

。是否可以将响应内容附加到模态内容?

是的,这是可能的。

在你的成功回报中尝试这段代码。

success: function (data) {
               var result=data; //response content html 
                $('#myModal').find('.modal-content').html(result);
                $('#myModal').modal('show');
            });

这将更新模态内容并显示您的模态。

docs

答案 1 :(得分:0)

你的意思是$(&#39;#modal-content&#39;)。innerHTML = result?

答案 2 :(得分:0)

success: function (data) {
               var result=data; //response content html 
                $('#myModal').find('.modal-content').html(result);
                $('#myModal').modal('show');
            });

我试试这个并且它有效