当用户访问网站时，登录模式窗口会自动出现在主页上

Login modal window comes over the home page automatically when user visit to website

本文关键字：主页 窗口 访问 用户 网站 登录模式      更新时间：2023-09-26

我有下面的代码触发登录模式点击主页上的链接。我想让它在加载主页时自动触发。

HTML 

<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a>      </center>
   <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>

<script type="text/javascript">
$(function(){
    $('#loginform').submit(function(e){
       return false;
    });
    $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
 });
 </script>

添加这个代码片段。演示小提琴

$(function(){
    $('#loginform').submit(function(e){
        return false;
    });
    $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
    $('#modaltrigger').trigger('click');
});

使用jQuery .trigger()手动触发对象上的点击事件

你可以使用javascript的setTimeout方法在页面加载时加载模态窗口，时间很短，比如10ms。

$(function(){
$('#loginform').submit(function(e){
e.preventDefault();
 });
    setTimeout(function(){
     $('#modaltrigger').trigger('click');
    },10);
 $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});

请参阅此处:http://jsfiddle.net/lokeshpahal/3vLdp/

相关文章：