HotTowel modal dialog

Recently, I started my first visual studio knockout/breeze app using one of the templates found online, and I wanted a modal dialog to open similar to this:

 <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>    

Here is the 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; }    

This worked fine, but now I'm attempting to implement this into a knockout/breeze application with hotTowel. Now when I click on the link button, I get a warning of 'No Route Found', and no pop-up. I gather hotTowel thinks I'm trying to navigate somewhere, is there a way to tell it not to in this instance? Or is it because hotTowel uses html instead of cshtml for the views? Can I not do it this way with hotTowel?

Of course it thinks you are trying to navigate, what did you expect from

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

if not navigation? That's what anchor tags do when they have an href attribute. You're getting a route exception instead of a 404 because the navigation is intercepted by the router and #close doesn't match any of the routes you have defined, but that doesn't change the underpinning problem.

If you want a click handler then you should define a click handler instead of a navigation anchor.

Write a JS function in scope. The most sensible place for this is as a method of your view-model, since validation requires access to any collected data which I hope you are binding to the view-model.

Then bind it. You can keep the anchor tag if it's important to your styling, but replace the href attribute with data-bind="click: yourVM.theMethod"

Or (assuming you put a method on the VM) you can use a binding reference like $root.theMethod. You could also use a relative reference and if you don't know what that is, I strongly encourage you to do the tutorials.