如何在点击按钮时在灯箱中打开iframe

时间:2016-03-04 11:08:45

标签: html css iframe fancybox

我想点击按钮在灯箱中打开iframe。

我正在使用fancybox lightbox。但是,我无法整合所有这些。

这是我的代码:

<div class="mx-header">
       <div class="mx-header-container">
           <a href="http://iradio.s.widget.ldrhub.com/releases/4/index.php?key=iradio&amp;url=http%3A%2F%2Fwww.iradio.ie%2F" title="itakeover" class="itakeover" target="_blank" >iTakeover</a>
         </div>
</div>

这是css

.itakeover{
position: relative;
width: 80px; height: 20px; 
background: linear-gradient(to right, #ffc400 , #ff7600);
color: white !important;
font-weight: 400;
font-size: 18px;
padding: 9px 40px !important;
top: 30px;
left: 100px;

}

这是我页面的截图。 http://uploadpie.com/R3n3P

我想在itoverover按钮上执行此操作。

2 个答案:

答案 0 :(得分:0)

只需初始化定位选择器private final AtomicReference<ExecutorService> ref = new AtomicReference<>(null); private void awaitTermination() throws InterruptedException { ExecutorService executor = ref.get(); if(executor != null) { executor.awaitTermination(1, TimeUnit.DAYS); } } public void readFile(JTextArea textArea) { ... while (line != null) { awaitTermination(); powThread t = new powThread("Thread" + (i+1), line, textArea); executor.execute(t); line = br.readLine(); i++; } ... } public void generateNumStrings(JTextArea textArea) { ... ExecutorService executor = Executors.newFixedThreadPool(totalThreads); ref.set(executor); ... } 的fancybox,并将public class BinaryTree { Node root; Node n; private class Node { public Node f; //father public Node right; public Node left; public int key; // key public String Student; public int Mark; public Node(int key) { right = null; left = null; f = null; Student = null; Mark = 0; } } public void remove() { System.out.println(""); System.out.println("Which student do you want to delete? Write down his ID."); int id = Genio.getInteger(); n = new Node(id); Node temporal = root; if(root == null) { System.out.println("This tree is empty"); } else { while(temporal != null) { n.f = temporal; if(n.key == temporal.key) { if(n.f.right == null && n.f.left == null) { n = null; temporal = null; } } else if(n.key >= temporal.key) { temporal = temporal.right; } else { temporal = temporal.left; } } } } } 设置为itakeover,如:

type

参见 JSFIDDLE

答案 1 :(得分:0)

唯一的问题是模态窗口与iframe内容的宽高比。我使用iframe-lightbox很容易设置16:9 4:3或任何你需要的尺寸。

  • 很适合YouTube / Vimeo / SoundCloud或其他通过iframe
  • 的网址
  • 通过data-padding-bottom属性自定义宽高比
  • 去抖动启动,默认500毫秒,自定义速率可以设置为第二个参数
  • 预加载onload事件成功后未设置的微调器