页面加载时自动加载模式的问题 Rails 5 Tailwindcss答案

【问题标题】：issue with autoloading modal on page load Rails 5 Tailwindcss页面加载时自动加载模式的问题 Rails 5 Tailwindcss
【发布时间】：2018-04-23 21:05:52
【问题描述】：

嘿，我正在尝试构建一个在用户登陆我的主页后 10 秒加载的模式。我在我的应用程序中添加了一个基本的模态示例，并绑定到添加自定义 js（我的弱点，我正在努力学习它......）。当我检查 chrome 中的元素时，我看到了这个错误：

application.self-33e0fcb4f9616be09c26add85386e3d65847a6a251a90987c7cc14257e70ecf6.js?body=1:25 Uncaught TypeError: $(...).modal is not a function
    at application.self-33e0fcb4f9616be09c26add85386e3d65847a6a251a90987c7cc14257e70ecf6.js?body=1:25

模态存储在我主页的一个部分中。我是模态的新手，但在这里将不胜感激任何帮助！

我的模态代码：

<div id="interestModal" class="animated fadeIn fixed z-50 pin overflow-auto bg-smoke-dark flex">
  <div class="animated fadeInUp fixed shadow-inner max-w-md md:relative pin-b pin-x align-top m-auto justify-end md:justify-center p-8 bg-white md:rounded w-full md:h-auto md:shadow flex flex-col">
    <h2 class="text-4xl text-center font-hairline md:leading-loose text-grey md:mt-8 mb-4">Question!</h2>
    <p class="text-xl leading-normal mb-8 text-center">
      Is this Working???
    </p>
    <div class="inline-flex justify-center">
      <button @click="toggleModal" class="bg-grey-lighter flex-1 border-b-2 md:flex-none border-green ml-2 hover:bg-green-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Absolutely
      </button>
      <button @click="toggleModal" class="bg-grey-lighter flex-1 md:flex-none border-b-2 border-red ml-2 hover:bg-red-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Not so much
    </button>
  </div>
    <span id="closeModal" class="absolute pin-t pin-r pt-4 px-4">
        <svg class="h-12 w-12 text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
  </div>
</div>

我的 javascript：

$(window).load(function(){
   setTimeout(function(){
       $('#interestModal').modal('show');
   }, 10000);
});

编辑：意识到我的 javascript 是用于引导模式的。

所以事实证明，这段代码是严格用于引导组件的，所以我回到了如何使用 javascript 或 jQuery 打开这个模式的问题上。关于如何在页面加载后打开这 10 秒的任何指针或资源？我知道我可能会达到，但我在严格的引导下删除了尽可能多的在线参考教程。

【问题讨论】：

你见过这个吗？它在模板中也有一个模态。 stackoverflow.com/questions/47491685/…

标签： javascript html css ruby-on-rails

【解决方案1】：

你的问题让我怀疑，所以，在写这个之前，我去w3schools at javascript reference，验证我要写什么，我不认为JS原生有modal()函数强>。

您有 2 个选项，或者您使用像 Semantic.UI Modal 这样的库，或者按照 w3schools 的说明进行操作

我个人觉得semantic.ui 很吸引人，我强烈推荐它。

顺便说一句，我假设您没有使用任何 JS 或 CSS 库，因为您使用了不提了。

【讨论】：