当前位置: 首页 > 知识库问答 >
问题:

Bulma CSS模式未显示

欧君之
2023-03-14

我使用Bulma作为我的CSS框架,在尝试使用它们的模态时,它们根本没有样式化,好像我遗漏了什么。

覆盖层就在那里,x按钮似乎就位并且可见,但内容是灰色的。

我正在使用以下代码:

<body>

<div id="modal-id" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
        Any other Bulma elements you want
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

</body>

Bulma的其他元素都在发挥作用。

注意:我不是在问JS部分,以及如何在Click上实际显示模态。我有纯粹的CSS问题。

共有1个答案

文鸣
2023-03-14

但这个目前正在放映,没有问题!

如果您需要一个设计,如卡片,请将.modal-contentdiv更改为:

  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      YOUR CONTENT
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
 类似资料:
  • 显示模式 返回上级 关于显示模式 测定支持的显示模式 设置显示模式 恢复显示模式 Mode X和Mode 13显示模式 对高分辨率和真彩色的支持 关于显示模式 返回目录 显示模式指的是显示器的当前设置,描述了显示器的分辨率和位深度,这个信息通常是由显示硬件从主页面传递给显示器的。显示模式是由三个特征定义的:宽、高、位深度。例如,大多数的显示器可以显示宽为640像素、高为480像素的图象,每一个像素

  • 问题内容: 我以为Python交互模式下的显示总是等效的,但是事实并非如此。这是语言功能还是我缺少什么?谢谢 问题答案: 是的,此行为是故意的。 来自Python文档 7.1。表达陈述 Expression语句(通常是交互式地)用于计算和写入值,或(通常)用于调用过程(一个不返回有意义结果的函数;在Python中,过程返回value )。表达式语句的其他用法是允许的,有时是有用的。表达式语句的语法

  • 问题内容: 我机智的结束了。经过十多个小时的故障排除(可能还有更多),我认为自己终于可以从事业务了,但是后来我得到了: 网络上对此信息很少,目前还没有解决方案解决了我的问题。任何建议将不胜感激。 我正在使用Python 3.4和Django 1.10。 从我的settings.py: 我的apps.py文件如下所示: 和 问题答案: 你是否缺少将应用程序名称放入设置文件中的信息?这是.manage

  • 问题内容: 我正在尝试使用AngularJS bootstrap.ui显示模式对话框。当我执行$ modal.open(…)时,屏幕变灰,并且我的templateUrl中的html从服务器调用,但是没有模式显示。当我单击灰色区域时,模态“关闭”,即灰色区域消失,屏幕再次看起来正常。我无法弄清楚为什么看不到任何模态屏幕。 我正在尝试遵循本教程: Angular指令 我正在使用Visual Studi

  • 问题内容: 我最近正在读《 学习JavaScript设计模式》 这本书。我没有得到的是模块模式和显示模块模式之间的区别。我觉得他们是同一回事。有人可以举一个例子吗? 问题答案: 至少有三种不同的方法来实现模块模式,但是显示模块模式是唯一具有正式名称的模块模式后代。 基本模块模式 模块模式必须满足以下条件: 私有成员住在封闭中。 公共成员暴露在返回对象中。 但是这个定义有很多歧义。通过以不同方式解决

  • 我刚从网站代码中用bootstrap 4尝试了modal css代码: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://