Question

尝试从另一个页面打开Bootstrap的modal-content，但它会以新页面而不是模态打开。不知道为什么它会像这样。

以下是我在第1页的代码：

    <div class="text-center list-details" >
          <h4>Time Frame: {{offer.delivery_duration? offer.delivery_duration : 'N/A'}}</h4>  
          <p>&nbsp;&nbsp;</p>
          <a data-toggle="modal" href="brands/{{request.variant.model.brand.id}}/models/{{request.variant.model.id}}/variants/{{request.variant.id}}/requests/{{request.id}}/offers/{{offer.id}}/modal"  data-target="#myModal" class="btn btn-success" role="button">View Full Offer</a>
    </div>
    <div id="myModal" class="modal fade" >
          <div class="modal-dialog">
          <div class="modal-content" style="border-radius: 0px;">
          </div>
        </div>
     </div>

这是包含模态内容的page2：

    <div class="modal-header" style="background-color: #213a4c; color:white;">
        <button type="button" class="close" data-dismiss="modal" style="color: #fff;">&times;</button>
        <h4 class="modal-title" style="color: #fff;"><strong>{{brand.name}} {{model.name}} {{variant.name}}</strong></h4>
      </div>
      <div class="modal-body" style="padding: 0px;">
         <div class="col-md-12">
              <div class="col-md-12 text-center noside-padding">
                <h2>{{brand.name}} {{model.name}} {{variant.name}}</h2>
              </div>
              <div class="col-md-6 n cardeal-detail">
<!-- first row -->
                <div class="col-md-6 noside-padding">
                     <h5>Ex Showroom Price</h5>
                </div>
                <div class="col-md-6 noside-padding text-right ng-binding">

                  {{offer.ex_showroom_price | currency:"&#8377; "}}
                </div>
            </div>
            </div>
      </div>
      <div class="modal-footer text-center" >
        <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Close</button>
      </div>

请问有人帮我这方面吗？如何在page1中将page2作为模态。

来自另一个页面的Bootstrap的模态内容不起作用，而是呈现为新页面

0 个答案: