link_to 弹出模态 div 在 Rails 中不起作用

Posted 2023-05-09

【中文标题】link_to 弹出模态 div 在 Rails 中不起作用

【英文标题】：link_to popup modal div not working in rails

【发布时间】：2017-06-11 06:51:22

【问题描述】：

我正在制作一个 Rails 应用程序，每当我点击 link_to“添加新进度”时，我想在其中显示一个模态弹出 div 我试着去做，但效果不佳。 javascript没有给出错误我不知道该怎么做。请帮助任何人

我的代码 = 查看文件

.modal.fade#myModal
.mymodal-content
    My content goes here
#main_div_index.row.clearfix

    #index_sidebar_aims
        %h4=link_to 'I have a new AIM' ,'class':'opener','data-toggle':"modal" ,'data-target':"#myModal"
        %br
        %h4=link_to 'I made progress' , aims_path
#index_progress_div.col-md-6.col-xs-6.col-sm-6
    show feeds from : 

我的代码 = javascript

var open = $('.opener');
var modal = $('.mymodal');

 open.onclick = function()
    modal.style.display='show';
 

我的代码 css

.mymodal 
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */


 /* Modal Content */
 .mymodal-content 
  position: relative;
  background-color: #fefefe; 

【问题讨论】：

尝试将modal.style.display='show'更改为modal.style.display='block'

不起作用，它们只是 js 中的一些问题，我更改了一些代码并尝试调试，然后我想出了这个 js 错误，上面写着 = 'application.self-d159971....js ?body=1:49 Uncaught TypeError: Cannot set property 'display' of undefined'

点击时是否出现此错误？

我是，我解决了这个问题，但仍然没有显示 div。我尝试在我的 fn 中放置一个警报 fn 以确保调用函数。

【参考方案1】：

您似乎已经在使用 jQuery。尝试使用 jQuery 在点击时显示模态；

var open = $('.opener');
var modal = $('.mymodal');

open.on('click', function(e)
    e.preventDefault();
    modal.show()
)

【讨论】：

重点是，当我将 link_to 更改为 html 按钮时，它起作用了

我希望它是 link_to 我怎样才能使它与 link_to 一起工作，以便我可以显示一个表单并将用户重定向到另一个页面

对不起，我对 Rails 的经验为零，link_to 当前呈现的是什么？ h4标签？它仍然可以与 jQuery jsbin.com/xododij/edit?html,css,js,output 一起使用。如果你用 jQuery 选择一个元素，它会返回一个 jQuery 对象并且它没有很多可用的本地方法，所以你必须使用 jQuery 来添加事件。