Question

我点击页脚按钮后会弹出一个弹出窗口（过渡淡入淡出效果..但我会这样做）

popup示例我喜欢：codepen.io/anon/pen/AIFyv

我似乎无法解决如何做到这一点，我已经阅读了这里（SO）和其他放置的示例，它们是有意义的但是当我将它应用于我的代码（html和css）时它无法正常工作。

我的例子： codepen.io/anon/pen/bVmjxN

也许我的代码＆＃39;不好？如果我写错了你也可以查看吗？

Answer 1

您的代码并不错，您只是没有为事件触发器绑定必要的JS，或者创建必要的CSS类来帮助转换。

您可以执行以上所有操作，使转换非常简单但很酷！这是我改变的代码，演示在底部。

HTML：

filename = video.mp4

CSS：

<?php

$api_request_url = 'https://upload.wistia.com';
$method_name = 'POST';

$api_request_parameters = array(
  'api_password' => '<<my_api_password>>',
  'url' => 'http://www.example.com/video-renders/'.$_POST['video-name'],
  'project_id' => $_POST['user-project-id']
);

$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

if ($method_name == 'DELETE')
{
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'DELETE');
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($api_request_parameters));
}

if ($method_name == 'GET')
{
  $api_request_url .= '?' . http_build_query($api_request_parameters);
}

if ($method_name == 'POST')
{
  curl_setopt($ch, CURLOPT_POST, TRUE);
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($api_request_parameters));
}

if ($method_name == 'PUT')
{
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($api_request_parameters));
}

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json'));
curl_setopt($ch, CURLOPT_URL, $api_request_url);
curl_setopt($ch, CURLOPT_HEADER, TRUE);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$api_response = curl_exec($ch);
$api_response_info = curl_getinfo($ch);
curl_close($ch);

$api_response_header = trim(substr($api_response, 0, $api_response_info['header_size']));
$api_response_body = substr($api_response, $api_response_info['header_size']);

// Response HTTP Status Code
echo $api_response_info['http_code'];

// Response Header
echo $api_response_header;

// Response Body
echo $api_response_body;

?>

我使用<div id="heading1"> <h1 id="header" class="text hide"> CSS is cool! </h1> </div>作为演示，您可以根据需要自定义它。要创建淡入淡出效果，请使用.text{ transition: all 1s ease-in; } .hide{ opacity: 0; }。

JS：

transition: all

CODEPEN DEMO

单击另一个标记时激活标记（：活动）

1 个答案: