Twitter引导模式-从iframe中获取信息并填充在主页上

Twitter Bootstrap Modal - Capture info from iframe and populate on main page

本文关键字：信息 填充 主页 获取 模式 iframe Twitter      更新时间：2024-04-22

我使用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中加载所有模态正文内容，而不是在主窗口中。模态加载良好，但输入不再像示例中那样正确地与主窗口通信以将结果发送到输入。

我能理解为什么它不起作用，我只是不确定如何使它起作用。

有人能帮忙吗？

我认为您的意思是希望将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_古代.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 -->
相关文章：