Question

我正在尝试从我的数据库中提取一些信息并将其放入模态中。我去了基金会网站并试图从他们的文档部分找到它。我完全不了解它。所以我的网站有一部分允许用户请求删除他们上传的歌曲。现在，如果他们点击X，则会弹出一个模态并要求确认。

    <div class="row">
      <div class="large-8 column musicup">
        <p> <?php echo "No music uploaded..."; ?> </p>
      </div>
    </div>
    <?php
        }else{
            ?>
    <h2 style="margin-top:1em;">Music uploaded</h2>
    <hr style="opacity:.4;">
    <?php
            while($row_a = mysql_fetch_array($res))
        { 
   ?>
    <div class="row">
      <div class="large-4 column musicup">
        <p><?php echo $row_a['title']; ?></p>
      </div>
      <div class="large-3 column musicup"><span data-tooltip class="has-tip tip-top" title="<?php echo $row_a['reason']; ?>">
        <div class="button <?php echo $row_a['status'];?>"><?php echo $row_a['status'];?></div>
        </span></div>
      <div class="large-3 column musicup_date">
        <p><?php echo date('F j Y',strtotime($row_a['uploaded'])); ?> </p>
      </div>
      <div class="large-2 column musicup">
        <p><a href="song_delete.php?id=<?php echo $row_a['song_id']; ?>" data-reveal-id="deleteMusic" data-reveal-ajax="true" style="font-weight:bold">X</a></p>
      </div>
    </div>
    <?php 
            }
        }
    } 
    ?>
    </div>

所以现在我在名为song_delete.php的新页面上有模态和所有数据库查询。

以下是代码：

<?php 
include_once "functions.php"; 

$query = sprintf("SELECT * FROM songs WHERE user_id = %d AND song_id = %d",$_SESSION['user_id'], $_GET['id']);
$res = mysql_query($query) or die('Error: '.mysql_error ());
$row_a = mysql_fetch_assoc($res);
$totalRows_a = mysql_num_rows($res);
?>
<div id="deleteMusic" class="reveal-modal medium">
<h2>Request to delete<span style="color:#F7D745;"> <?php echo $row_a['title']; ?></h2>
<p class="lead">Are you sure you want to delete this song? Please allow 2 full business weeks for deletion.</p>
<span style="float:right;"><a href="#" class="button close-reveal-modal cancelbtn">Cancel</a>    
<a href="#" class="button submitbtn">Submit</a>  </span>

<a class="close-reveal-modal">&#215;</a>
</div>

提前感谢您的帮助。我很感激。

请不要告诉我关于mysql_query以及我应该如何使用PDO或MySQLi和OOP我知道这一点，但是这个网站目前没有用所有这些编码..

Answer 1

首先确定第一件事 - 在这些情况下查看编译源（HTML源代码）通常会更好。你能做这个吗？从您给出的代码看起来很好但没有css / js链接并显示显示代码的位置，没有办法告诉。

基金会如何发挥作用

1 - 模态代码放在结尾</body>之前。

2 - 看起来应该是这样的：

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

3 - 根据您想要的尺寸，您可以使用额外的.small类（浏览器宽度为30％的显示尺寸。或其中一个（直接来自Foundation Docs）

.medium ：将宽度设置为40％。
.large ：将宽度设置为60％。
.xlarge ：将宽度设置为70％。
.expand ：将宽度设置为95％。

4 - 此时您可以附加data-reveal-id="<id of modal here>"或通过基础调用模态。 此时，您的模式将在所有Foundation 4支持的浏览器中弹出。 但是你需要javascript文件来关闭它。

5 - 现在确保你有必要的脚本

<!-- If running version with default scripts -->
<script src="foundation.js"></script>
<script src="foundation.reveal.js"></script>

6 - 然后调用$(document).foundation()，然后通过神奇的jQuery javascript库，它应该按预期工作： - ）。

<强>附加功能

您可以添加额外属性以显示您是否愿意这样做（List of all the attributes ）：

$(document).foundation('reveal',<options here>,<callback>)

最后你可能想要取消ajax标签（你不是异步调用任何内容 - 它都是在运行时通过你的服务器编译的

Answer 2

我将使用https://packagist.org/packages/phpfui/phpfui来完全处理所有需要花很长时间才能解决的问题。您只需将PHP对象添加到页面，然后输出页面，PHPFUI会处理其他所有事情。

我在大约3分钟内完成了这个示例。如此简单，就可以了。

namespace PHPFUI;

// Your autoloader here
include '../vendor/autoload.php';

$page = new Page();
$page->addStyleSheet('/css/styles.css');

$buttonGroup = new ButtonGroup();
$openButton = new Button('Click me for a modal');
$buttonGroup->addButton($openButton);

$reveal = new Reveal($page, $openButton);
$reveal->add(new Header('Awesome. I Have It.'));
$reveal->add('<p class="lead">Your couch. It is mine.</p>');
$reveal->add("<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>");
$reveal->add(new Input\Date($page, 'date', 'A Cool Date Picker', '2019-10-10'));

$nestedButton = new Button('Click me for a nested modal');
$buttonGroup->addButton($nestedButton);

$nestedReveal = new Reveal($page, $nestedButton);
$nestedReveal->add(new Header('Awesome!'));
$nestedReveal->add('<p class="lead">I have another modal inside of me!</p>');
$nestedReveal->add(new Input\File($page, 'Drag and Drop File Upload'));

$nestedRevealButton = new Button('Click me for another modal!');
$nestedReveal->add($nestedRevealButton);

$nestedReveal2 = new Reveal($page, $nestedRevealButton);
$nestedReveal2->add(new Header('ANOTHER MODAL!!!'));
$nestedReveal2->add(new SubHeader('With A Photo, how cool!'));
$nestedReveal2->add(new Image('https://foundation.zurb.com/sites/docs/assets/img/rectangle-1.jpg'));

$page->add($buttonGroup);

echo $page;

php在基础模态中

2 个答案: