Question

第一次问问这里。

我正在尝试制作一个下载按钮，不仅可以提供文件下载，还可以激活模式弹出窗口，为用户提供有关下载文件的简单说明。

我正在使用我在网上研究过的内容：

.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: 400px;
  position: absolute;
  bottom: -125px;
  left: 10px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  /*background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);*/
}

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <img src="http://i57.tinypic.com/chxtz.png" />
  </div>
</div>

<a href="#openModal" onclick="window.open('pathtodownloadfile');" class="download-now">Download</a>

它的工作原理是它会激活模式弹出窗口，并为要提供的文件打开一个新选项卡。

有没有办法这样做，以便可以在不打开新窗口的情况下提供文件？我看过网站有一个下载按钮，当按下时，弹出一个小的教学模式，帮助用户在同一页面内下载/安装文件，不需要第二个窗口..

我错过了什么？

Answer 1

如果您了解jQuery，可以使用它为用户添加弹出窗口。并且能够将您可以的文件和服务器上文件的URL路径下载到锚标记的href。

http://jsfiddle.net/5ev5w0qd/1/

<强> JQUERY

$('.download-now').on('click', function () {
    $('#openModal').css('opacity', '1');
    setTimeout(function () {
        $('#openModal').css('opacity', '0');
    }, 6000)
    return false;
});

HTML下载文件

<a href="yourdownloadlinkgoeshere" class="download-now">Download</a>

如何制作下载链接也激活模态弹出消息？

1 个答案: