Hi there, I've encountered the following problem. I have a link that opens a leanModal window when clicked:
QRID Login
<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">
</div>
</form>
</div>
</div>
</div>
How can I programmatically close leanModal with Javascript code? Thanks!
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>
</p>
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:
$(o.signuplink).click(function(){close_modal_id("#signup")});
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" });
});
</script>
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>
</p>
And finally this js code edited :
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
// 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": o.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);
SEND BITCOIN TIPS
User rating:
User rating:
FavScripts.com 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 FavScripts.com!
