Question

嘿所有我试图构建一个模式，在用户登陆我的主页后加载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用于bootstrap模式。

所以事实证明这个代码严格来说是一个bootstrap组件，所以我回过头来讨论如何使用javascript或jQuery打开这个模式。页面加载后如何打开10秒的任何指针或资源？我知道我可能会到达，但我正在罢工，因为许多教程在线参考严格的bootstrap。

Answer 1

你的问题让我怀疑，所以，在写这篇文章之前，我去了w3schools at javascript reference，以验证我要写的内容，我认为JS本身没有modal（）函数

您有2个选项，或使用Semantic.UI Modal之类的图书馆或按照w3schools
上的说明操作
就个人而言，我发现semantic.ui很吸引人，我强烈推荐它。

顺便说一下，我假设您没有使用任何 JS 或 CSS 库不要提它。

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

1 个答案: