如何以编程方式使链接工作？

Question

我有这个登录/注册链接，当用户点击时，它会弹出一个登录窗口。

现在，当用户必须登录时，他只需登录此弹出窗口即可。

这是登录/注册链接的代码

<a id="modal_trigger" href="#modal" style="margin-top:6px; margin-right:14px">Login|Signup</a>

给出弹出窗口的 Jquery

  $("#modal_trigger").leanModal({top : 50, overlay : 0.6, closeButton: ".modal_close" });

$(function(){
    // Calling Login Form
    $("#login_form").click(function(){
        $(".social_login").hide();
        $(".user_login").show();
        return false;
    });

    // Calling Register Form
    $("#register_form").click(function(){
        $(".social_login").hide();
        $(".user_register").show();
        $(".header_title").text('Register');
        return false;
    });

    // Going back to Social Forms
    $(".back_btn").click(function(){
        $(".user_login").hide();
        $(".user_register").hide();
        $(".social_login").show();
        $(".header_title").text('Login');
        return false;
    });

})

注意：我试过这个 document.getElementById（'modal_trigger'）。click（）; 可能这可能是这个问题的重复How do I programmatically click a link with javascript?但我似乎没有得到我的答案。

问题：当用户点击“登录/注册”超链接时，弹出窗口才出现。如何让这个弹出窗口编程出来？

更新

$( document ).ready(function() {
    $("#modal_trigger")[0].click();
});



$( document ).ready(function() {
    $(function() {
        $("#modal_trigger").leanModal({top: 50, overlay: 0.6, closeButton: ".modal_close"});

        $(function () {
            // Calling Login Form
            $("#login_form").click(function () {
                $(".social_login").hide();
                $(".user_login").show();
                return false;
            });

            // Calling Register Form
            $("#register_form").click(function () {
                $(".social_login").hide();
                $(".user_register").show();
                $(".header_title").text('Register');
                return false;
            });

            // Going back to Social Forms
            $(".back_btn").click(function () {
                $(".user_login").hide();
                $(".user_register").hide();
                $(".social_login").show();
                $(".header_title").text('Login');
                return false;
            });

        })
    });

});

也试过这个。不行。

CODEPEN： http://codepen.io/monkeytempal/pen/VvKLMe以下是codepen中的工作代码。

Answer 1

您需要将其放在doc ready块中：

$(function(){

    $("#modal_trigger").leanModal({top : 50, overlay : 0.6, closeButton: ".modal_close" });
    // other code
});

现在，如果要触发模态，可以在doc ready块中使用此代码：

$("#modal_trigger")[0].click(); // == document.getElementById('modal_trigger').click();

您只需要一个doc ready块，首先必须注册/绑定leanModal到锚点，然后才能触发它：

$(function(){
    $("#modal_trigger").leanModal({top: 50, overlay: 0.6, closeButton: ".modal_close"});

   // now you should trigger
   $("#modal_trigger")[0].click();

   // other code put below

});

Answer 2

你可以这样试试 -

document.getElementById('login_form').click();

document.getElementById('register_form').click();

要触发由该按钮触发的任何事件，请单击简单的JavaScript。

或者像这样使用jQuery -

$("#register_form").click();
$("#login_form").click();
$().find("anything_you_want").click();

更新 -

使用Bootstrap - 将此事件添加到您的点击事件 -

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

更多信息 -

$('#your_link_id').click()

从这个优秀的jquery docs获取更多信息。

请检查出来。

$('#your_link_id').trigger('click');

它应该有用。

Answer 3

使用此代码：

   // Plugin options and our code
$("#modal_trigger").leanModal({
        top: 100,
        overlay: 0.6,
        closeButton: ".modal_close"
});

$(function() {
        // Calling Login Form
        $("#login_form").click(function() {
                $(".social_login").hide();
                $(".user_login").show();
                return false;
        });

        // Calling Register Form
        $("#register_form").click(function() {
                $(".social_login").hide();
                $(".user_register").show();
                $(".header_title").text('Register');
                return false;
        });

        // Going back to Social Forms
        $(".back_btn").click(function() {
                $(".user_login").hide();
                $(".user_register").hide();
                $(".social_login").show();
                $(".header_title").text('Login');
                return false;
        });
});


$( document).ready(function() {
    $("#modal_trigger")[0].click();
});

Answer 4

Using simple jquery 

$("#YourLinkID").click();