How I can programmatically close leanModal popup?

No specific Bitcoin Bounty has been announced by author. Still, anyone could send Bitcoin Tips to those who provide a good answer.

Hi there, I've encountered the following problem. I have a link that opens a leanModal window when clicked:

<a href="#feedback"></a>

Also, here is a content of my modal window:

 <div id="feedback"  class="signup modal ">
    <div class="f_form_padding">
        <div id="signup-ct">

            <form class="f_form add_feedback_form" method="post">

                <div class="title">Заказать обратный звонок</div>
                <div id="for_result"></div>

                <div class="holder">

                    <label for="f_name">Ваше имя: <span class="required">*</span></label>
                    <input maxlength="200" name="name" type="text" id="f_name" />

                    <label for="f_phone">Ваш телефон: <span class="required">*</span></label>
                    <input maxlength="200" name="telephone" type="text" id="f_phone" />

                    <label for="time_for_call">Удобное время звонка:</label>
                    <input maxlength="200" name="time_for_call" type="text" id="time_for_call" />

                    <!-- <img src="/skins/{skin}/js/leanmodal/ajax.gif" id="ajax_img"> -->

                    <input type="submit" class="btn" value="Отправить" sourceindex="6">



How can I programmatically close leanModal with Javascript code? Thanks!

1 Answer

1 tip with total amount of 12.299999 mBTC($3 USD) have been sent by alex

The goal is to close current modal when you click "Login" in your register window, then open the Login modal.

First you will need to edit your js.

1/ Add the link in register window :

<p class='signup-link'>
   You already have an account? <a rel="leanModal" name="login" href="#login">Log In</a>

2/ Edit your js - add an option to defaults variable. The new option is "signuplink" and you put the name of the previous class for your link:

var defaults={top:100,overlay:0.5,closeButton:null,signuplink:".signup-link"};

3/ Then add a new function. This function will close ONLY your modal, and not your #lean_overlay :

function close_modal_id(modal_id){$(modal_id).css({"display":"none"})}}})})(jQuery);

4/ Use this function to close your register window:


5/ Add the new option on your html if you want to change it

$('a[rel*=leanModal]').leanModal({ top : 200, overlay:0.85, closeButton: ".btn-close", signuplink:".signup-link" });

That's all!

So :

In your html page, you'll have this code in your <head> tag:

<script type="text/javascript">
        $(function() {
            $('a[rel*=leanModal]').leanModal({ top : 200, overlay:0.85, closeButton: ".btn-close", signuplink:".signup-link" });        

Then you'll have this link in your register window :

<p class='signup-link'>
   You already have an account? <a rel="leanModal" name="login" href="#login">Log In</a>

And finally this js code edited :

// leanModal v1.1 by Ray Stone -
// Dual licensed under the MIT and GPL

(function ($) {$.fn.extend({leanModal: function (options) {var defaults = { top: 100, overlay: 0.5, closeButton: null, signuplink: ".signup-link" };var overlay = $("<div id='lean_overlay'></div>");$("body").append(overlay);options = $.extend(defaults, options);return this.each(function () {var o = options;$(this).click(function (e) {var modal_id = $(this).attr("href");$("#lean_overlay").click(function () { close_modal(modal_id) });$(o.closeButton).click(function () { close_modal(modal_id) });$(o.signuplink).click(function () { close_modal_id("#signup") });var modal_height = $(modal_id).outerHeight();var modal_width = $(modal_id).outerWidth();$("#lean_overlay").css({ "display": "block", opacity: 0 });$("#lean_overlay").fadeTo(200, o.overlay);$(modal_id).css({ "display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(modal_width / 2) + "px", "top": + "px" });$(modal_id).fadeTo(200, 1); e.preventDefault()})});function close_modal(modal_id) { $("#lean_overlay").fadeOut(200); $(modal_id).css({ "display": "none" }) };function close_modal_id(modal_id) { $(modal_id).css({ "display": "none" }) }}})})(jQuery);
User rating:

Thanks for your answer!


Too many commands? Learning new syntax? is a free tool to save your favorite scripts and commands, then quickly find and copy-paste your commands with just few clicks.

Boost your productivity with!

Post Answer