Question

我正在使用bootstrap与jquery一起捕获在模态中选择的按钮的标题，然后在主窗口的输入中填充结果。当您将模态保留在主父页面上时，一切正常，如此示例所示：

HTML：

<div class="container">
  <div id="chooseTemplateLocal" class="templateSelect input-prepend">
    <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Choose Template&hellip;</a>
    <input type="text" class="template-text" value="No template chosen" >
  </div>

</div>

<!-- Modal - Loaded on same page -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="template-group">
          <div class="template">
              <p>Template Title 01</p>
              <button role="button" class="btn" data-dismiss="modal" name="Company Deal 01">Select</button>
          </div>
          <div class="template">
              <p>Template Title 02</p>
              <button role="button" class="btn" data-dismiss="modal" name="Enroll Benefits 01">Select</button>
          </div>
          <div class="template">
              <p>Template Title 03</p>
              <button role="button" class="btn" data-dismiss="modal" name="Uploaded Template">Select</button>
          </div>
      </div>
  </div>
  <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
     <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JQUERY：

$('.template-group > .template > .btn').click(function(){
    // Capture Title
    var name = $(this).attr('name');
    $(this).data('templateText', name).removeAttr('name');
    $('.template-text').val(name);
});

http://jsfiddle.net/MHP5d/24/

我被要求在iframe / remote中而不是在主窗口中加载所有模态体内容。模态加载正常，但输入不再正确地与主窗口通信，以将结果发送到输入，如示例中所示。

我能理解为什么它不能正常工作，我只是不确定如何使它发挥作用。

任何人都可以提供帮助吗？

Answer 1

我认为您所说的是您想要将iframe中的内容动态加载到模态窗口中。我做了类似的事情，这就是我所做的。

您必须使用ajax加载iframe。我不得不挖掘我发现的解释。

这就是我为了让它发挥作用所做的。我刚从一个项目中解脱出来。显然你必须相应改变。

<强> /home.html

<a data-toggle="modal" href="#" data-href="modal_ancient.html" class="btn btn-          
primary">CLICK ME</a>


<script type="text/javascript">
$('body').on('click','a[data-toggle="modal"]',function(e){
 var action = $(this).attr('data-href');
 $.ajax({
  url : action,
  type: "GET",
  success: function(response) {
   $('<div class="modal fade"></div>').html(response).modal();
  }
 });
 e.preventDefault();
});
</script>

然后我将我的模态内容放在一个单独的文件中。

<强> /modal_ancient.html

<div style="max-width: 230px;" class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>
  <div class="modal-body">
 <iframe style="border: 0; width: 170px; height: 631px;" src="http://bandcamp.com/EmbeddedPlayer/album=3938117856/size=large/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless><a href="http://music.owlphabet.com/album/ancient-whales">Ancient Whales by Ancient Whales</a></iframe>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
 </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Twitter Bootstrap模式 - 从iframe捕获信息并填充在主页上

1 个答案: