2016-12-27 49 views
0

我有一个页面,可以在单击链接时显示的模式下使用。它可以与文本一起工作,但我无法想象一种方式可以使其与冲击波对象正常工作。当嵌入到代码中时,flash元素将始终显示,而不是仅在单击模式时才显示。我应该怎么做才能使闪光灯一开始就隐藏起来,只显示在单击链接后显示的模式窗口内?如何正确地将Flash对象插入到模式HTML对话框中

这里是德HTML摘录:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>MODAL</title> 
    <meta name="description" content="responsive layout demos"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" media="screen" href="css/left-fluid.css"> 

    <!--[if lt IE 9]> 
     <script src="js/html5shiv.min.js"></script> 
     <script src="js/respond.min.js"></script> 
    <![endif]--> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    </head> 

    <body> 
    <header></header> 

    <div class="columns-container"> 

     <div class="left-column"> 

     <div id="modal-window"> 
      <a href="#openModal" class="botao"><h3 class="botao"><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp; click here to see the modal with flash</h3></a> 
     </div> 

      <div id="openModal" class="modalDialog"> 
       <div> 
       <a href="#close" title="Close" class="close">X</a> 
       <P>THIS IS SHOWN IN THE MODAL</P> 
       <!--THIS IS NOT -> --><embed width="500" height="300" src="flash/stuff.swf"> 
       </div> 
     </div> 
    </body> 
</html> 

这是CSS:

type="application/x-shockwave-flash" 
 
     pluginspage="http://www.macromedia.com/go/getflashplayer"

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
    } 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
    } 

.modalDialog > div { 
    width: 600px; 
    position: relative; 
    margin: 3% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #eee; 
    } 

.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    } 

.close:hover { 
    background: #00d9ff; 
    } 
+0

仅供参考Flash不会在大量的设备,现在运行。你最好将该文件转换为html5。 – mlegg

+0

我很想去那样做,但我做不到。此外,此代码将运行在已知浏览器的专用网络中,这些浏览器只能在Intranet上运行,所以现在不存在问题。 –

+0

你测试过哪些浏览器?所有相同的结果?如果在'<! - THIS IS NOT - > - >'部分,您使用指向swf的html容器/嵌入器的** i-frame **,会发生什么?使用** innerHTML **来更新打开的模式窗口帮助吗?作为最终解决方案,快速测试不同的灯箱工具,以确保您的当前代码... –

回答

1
<embed width="500" height="300" src="flash/stuff.swf">代码

在年底前>添加此

你有2个未封闭<div>标签,添加</div>下每一种<div class="columns-container"><div class="left-column">

+0

这非常接近,适用于Chrome和Edge,但不适用于Firefox。该对象即使在模态关闭的情况下也显示出来,为什么? –

+0

我不确定,因为我主要使用Firefox,你有Firefox的Flash插件吗? https://support.mozilla.org/en-US/kb/install-flash-plugin-view-videos-animations-games – mlegg

+0

是的,该对象正常工作...除了它不像其他的模式隐藏浏览器。 –

相关问题