HotTowel 模式对话框

Posted 2023-03-27

【中文标题】HotTowel 模式对话框

【英文标题】：HotTowel modal dialog

【发布时间】：2015-09-19 03:19:55

【问题描述】：

最近，我使用网上找到的一个模板启动了我的第一个 Visual Studio Knockout/Breeze 应用程序，我希望打开一个类似于这样的模式对话框：

 <a href="#openModal">Open Modal</a>

 <div id="openModal " class="modalDialog">
           <a href="#close" title="Close" class="close">X</a>
           <div data-bind="foreach: userDetails">                   
               <p>User details go here</p>
               <p data-bind="text: $data.name" />
               <p data-bind="text: $data.role" />                        
           </div>                   
</div>    

这里是 CSS

.modalDialog 
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
border:2px solid #4cff00;
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;

.modalDialog:target 
opacity:1;
pointer-events:stroke;


.modalDialog > div 
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border:1px solid;
border-color: #fee209;
border-radius: 1px;
background: #b5a526;
background: -moz-linear-gradient(#b5a526, #000);
background: -webkit-linear-gradient(#b5a526, #000);
background: -o-linear-gradient(#b5a526, #000);


.close 
background: #FFFFFF;
color: #204510;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;


.close:hover  background: #00d9ff;     

这很好用，但现在我正在尝试使用 hotTowel 将其实现到淘汰赛/微风应用程序中。现在，当我单击链接按钮时，我收到“未找到路线”的警告，并且没有弹出窗口。我收集 hotTowel 认为我正在尝试在某个地方导航，有没有办法告诉它在这种情况下不要？还是因为 hotTowel 使用 html 而不是 cshtml 作为视图？我不能用 hotTowel 这样做吗？

【问题讨论】：

我认为“No Route Found”消息是因为您的链接有href="#openModal"，所以它将您的浏览器路由到#openModal。什么是为该链接设置事件处理程序？单击该链接时应该运行什么 javascript？

据我所知没有。它只是单独使用 css 工作，当 openModal div 的目标是它在 css 中设置为 1 的不透明度时。

发生错误，因为您定义了路由 #openModal。您可以通过将<a href="#openModal">Open Modal</a> 替换为<button data-bind="click: doSomething">ButtonName</button> 来修复它。

其次，如果你真的想导航到某个地方，你必须在shell.js 中定义路线，就像在你的情况下 route: 'openModal', moduleId: 'openModal', name: 'Modal', nav: 0 将它添加到你的路线然后你的<a href="#openModal">Open Modal</a> 将工作。

【参考方案1】：

它当然认为你正在尝试导航，你对它有什么期望

<a href="#close" title="Close" class="close">X</a>

如果不是导航？这就是锚标签在具有href 属性时的作用。您得到的是路由异常而不是 404，因为导航被路由器拦截，并且 #close 与您定义的任何路由都不匹配，但这不会改变基础问题。

如果你想要一个点击处理程序，那么你应该定义一个点击处理程序而不是导航锚。

在作用域内编写一个 JS 函数。对此最明智的地方是作为您的视图模型的方法，因为验证需要访问我希望您绑定到视图模型的任何收集的数据。

然后绑定它。如果锚标记对您的样式很重要，您可以保留它，但将 href 属性替换为 data-bind="click: yourVM.theMethod"

或者（假设您在 VM 上放置了一个方法）您可以使用像 $root.theMethod 这样的绑定引用。你也可以使用相对参考，如果你不知道那是什么，我强烈建议你do the tutorials。

【讨论】：

我想我预计它会像以前一样工作。

很公平。当示例将锚标记用于超链接以外的任何内容时，我总是觉得令人费解。它暗示了不真实的事情。

谢谢，我使用 durandal 的 dialog.show 和从主视图模型上的 data-bind:click 函数打开的新视图模型/视图使其工作。如果有人感兴趣，我在这里使用了一个示例作为指导（ericpanorel.net/2013/07/28/modal-dialog-for-hottowel-spa）