Question

我努力遵循this MODAL登录的步骤，但出于某种原因，我无处可去！非常令人沮丧。

所以this是我正在处理的网页。一切都被遵循，它可以起作用。

我将简要地指出代码片段：

在页面顶部有css样式：

＆＃13;

<style type="text/css">


/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
 
#loginmodal {
  width: 300px;
  padding: 15px 20px;
  background: #f3f6fa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
 
#loginform { /* no default styles */ }
 
#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }
 
.txtfield { 
  display: block;
  width: 100%;
  padding: 6px 5px;
  margin-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  color: #7988a3;
  font-size: 1.4em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
  background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
  background-image: -moz-linear-gradient(top, #edf3f9, #fff);
  background-image: -ms-linear-gradient(top, #edf3f9, #fff);
  background-image: -o-linear-gradient(top, #edf3f9, #fff);
  background-image: linear-gradient(top, #edf3f9, #fff);
  border: 1px solid;
  border-color: #abbce8 #c3cae0 #b9c8ef;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
 
.txtfield:focus {
  outline: none;
  color: #525864;
  border-color: #84c0ee;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}


</style>

＆＃13;

我还在标题部分添加了相关的2 .js文件链接：

＆＃13;

<script type="text/javascript" src="http://examscan.us/shulemberger/wp-includes/js/jquery-1.9.1.min.js">
</script>
  <script type="text/javascript" charset="utf-8" 
src="http://examscan.us/shulemberger/wp-includes/js/jquery.leanModal.min.js">
</script>

＆＃13;

然后，在网页的顶部，我有了MODAL的链接：

＆＃13;

<li><a  href="#loginmodal" class="flatbtn" id="modaltrigger">Sign in</a></li>
				<li><a class="flatbtn" id="modaltrigger" href="#loginmodal">Sign up</a></li>

＆＃13;

最后，在页面底部我有模态代码：

＆＃13;

<div id="loginmodal" style="display:none;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
    </form>
  </div>

＆＃13;

Answer 1

那么，

http://leanmodal.finelysliced.com.au/ - ＆gt;如何使用 - ＆gt;第3步：在模态触发器上调用函数，如下所示。请务必设置触发器锚点的href属性以匹配目标元素的id。

$("#trigger_id").leanModal();

...或者，如果您想在同一页面上设置多个模态窗口，只需添加＆＃39; rel＆＃39;属性为触发器，并按属性调用函数，如下所示：

$("a[rel*=leanModal]").leanModal();

我在提供的代码中看不到这条说明。

Answer 2

如前所述，您的代码不包含对leanModal（）的调用。但是，在您的页面上，leanModal尚未定义。我认为你的一个脚本（可能是一个插件）导致leanModal无法正常加载。通过在运行所有其他代码后在控制台中加载leanModal的代码，我能够在页面上工作。尝试在页面末尾包含leanModal，然后包含以下代码：

$('#modaltrigger').leanModal();

请务必自定义放置，关闭等选项参数

这个MODAL有什么问题？

2 个答案: