无法获得基本的 SimpleModal & ASP.NET MVC 2 工作:( 帮助
我想做的就是获得 SimpleModal 与 ASP.NET MVC 2 一起使用的基本演示，我得到了奇怪的行为...
我所做的基本上是将演示中的 index.html 复制到我的 /Home 的 Index.aspx 正文..所以它看起来像这样：
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
</asp:Content>
在我的 Site.Master 中，我包含演示中的所有 js 文件：
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/Scripts/jquery.js'></script>
<script type='text/javascript' src='/Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/Scripts/basic.js'></script>
我认为它发现所有这些都很好......但它不起作用......运行后这是源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Home Page
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/Scripts/jquery.js'></script>
<script type='text/javascript' src='/Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/Scripts/basic.js'></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<div id="menucontainer">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</div>
</div>
<div id="main">
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
有什么看起来很奇怪吗？我错过了什么吗？
All i wanna do is get the basic demo for SimpleModal working with ASP.NET MVC 2, i get weird behavior...
What im doing is basically copying the index.html from the demo, to the Index.aspx body of my /Home..so it looks like this:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
</asp:Content>
And in my Site.Master i include all the js files from the demo:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/Scripts/jquery.js'></script>
<script type='text/javascript' src='/Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/Scripts/basic.js'></script>
I think it finds all of them just fine..but it doesnt work..heres the source once its run:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Home Page
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/Scripts/jquery.js'></script>
<script type='text/javascript' src='/Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/Scripts/basic.js'></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<div id="menucontainer">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</div>
</div>
<div id="main">
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Anyything look weird? Am i missing something?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在我看来，您缺少一个
也许是这样的？
It appears to me that you are missing a
<script>block to actually utilize/implement the modal plugin.maybe something like this?