无法让基本的 SimpleModal 和 ASP.NET MVC 2 工作:( 帮助答案

【问题标题】：Cannot get basic SimpleModal & ASP.NET MVC 2 working :( Help无法让基本的 SimpleModal 和 ASP.NET MVC 2 工作:( 帮助
【发布时间】：2010-11-25 20:30:39
【问题描述】：

我想做的只是获得 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('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
   <p><code>$('&lt;div&gt;&lt;/div&gt;').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'>
  &copy; 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('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
   <p><code>$('&lt;div&gt;&lt;/div&gt;').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'>
  &copy; 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>

有什么奇怪的吗？我错过了什么吗？

【问题讨论】：

“我的行为很奇怪。这是我的所有代码。怎么了？”一个很懒的问题。
像个白痴一样——我忘了放 simplemodal 使用的页面样式——但有一个问题——用来关闭它的“X”不见了……有什么想法吗？
下载一个 X 图像，把它放到你的服务器上，然后调整 CSS 指向它。有一张来自 SimpleModal 项目页面的图片。
另外，如果你使用的是 ASP.NET，你需要使用 appendTo 选项：$(element).modal({appendTo:'form'});

标签： jquery asp.net-mvc asp.net-mvc-2 jquery-plugins simplemodal

【解决方案1】：

在我看来，您缺少一个 <script> 块来实际使用/实现模态插件。

也许是这样的？

<script>
   $().ready({
       $('#basicModalContent').modal();
   });
</script>

【讨论】：

哦，伙计 - 我忘了放 css 文件....
你不能简单地引用 modal.js 文件而不告诉它应该应用于什么。看答案中的代码sn-p。
@jerrold ，这就是为什么总是打开 firebug ，它会告诉你所有的错误。