HotTowel模态对话框

Question

最近，我使用在线找到的模板之一启动了我的第一个可视化工作室淘汰赛/微风应用程序，我希望打开一个类似于此的模式对话框：

 <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这样做吗？

Answer 1

当然，它认为你在尝试导航，你期望从什么？

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

如果不是导航呢？当锚标记具有href属性时，锚点标记就是这样做的。您将得到一个路由异常，而不是404，因为导航被路由器拦截，并且#close不匹配您定义的任何路由，但这不会改变基础问题。

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

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

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

或者(假设您在VM上放置了一个方法)，您可以使用像$root.theMethod这样的绑定引用。您也可以使用一个相对引用，如果您不知道这是什么，我强烈建议您使用做教程。