單擊表單上的「提交」關閉模式窗口

我有一個模式窗口，允許用戶將表單作爲一個號召性用語提交。然而，點擊'提交'關閉模式窗口，但我不希望它。 Here is the page: infowest.com/residential-internet。單擊表單上的「提交」關閉模式窗口

要激活模式窗口，用戶在Internet選項的任意「卡片」上單擊黃橙色的「開始」按鈕。然後填寫並提交表格，用戶點擊「請求回電」按鈕。其實，來找到，點擊ANYWHERE接受「請求回調」按鈕關閉模式窗口，而不只是點擊'提交'按鈕。

我嘗試使用此代碼：

if ($(event.target).is('.modal-window-content')) { 
    return false; 
} 
if ($(event.target).is('input')) { 
    return false; 
}

保持模式從封閉，這工作，但並沒有讓表單提交，甚至試圖提交。表單使用Ajax。這是WP Contact Form 7插件。

我正在使用jQuery，我只是編造，但我從來沒有真正教過jQuery，所以我假設我犯了js代碼中的錯誤。這裏是我的代碼：

var pagePosition; 
$('.js--activate-cta-modal').click(function() { 
    if ((!$(this).hasClass('.active')) && (!$('body').hasClass('modal-active'))) { 
    pagePosition = $(window).scrollTop(); 
    $('.cta-modal-window').css("margin-top", pagePosition); 
    $(this).addClass("active"); 
    $('body').addClass("modal-active"); 
    $('body').css("top", -pagePosition); 
    return false; 
    } 

    if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
    $('body').removeClass('modal-active') 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
    } 
}); 
$('.js--activate-cta-modal').click(function (e) { 
    e.stopPropagation(); 
}); 
$('.modal-overlay').click(function() { 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
}); 
$('.cta-modal-window').click(function() { 
    // if ($(event.target).is('.modal-window-content')) { 
    // return false; 
    // } 
    // if ($(event.target).is('input')) { 
    // return false; 
    // } 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
}); 
$('.close-modal-window').click(function() { 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
});

我非常感謝任何和所有的幫助！謝謝！

來源

2015-04-20 Dallan

我想我沒有提到，對於我來說，爲了關閉窗口，可以點擊通過模式疊加變暗的外部區域，這一點非常重要。這就是爲什麼我添加了那麼一點代碼。刪除，確實解決了幾乎每次關閉模式窗口的問題。我試圖看到如何使UX功能以我需要的方式運行。 – Dallan

重要的是不要混淆Event.stopPropagation()和Event.preventDefault()，並且確切地瞭解他們做了什麼。

Event.stopPropagation()將防止事件冒泡通過DOM。通常情況下，如果你點擊一個元素，它的事件將試圖觸發，然後父元素將嘗試觸發它的事件版本，等等。這用於將事件包含在DOM的某個級別上。

Event.preventDefault()將停止元素可能觸發的默認操作。最常見的是在form上使用它來阻止它提交。這用於消除具有特定事件的元素的默認行爲。

下面是一個常見的模態分段技術的例子。 http://codepen.io/Oka/pen/xGKJVJ

（如果你是新來CodePen，點擊眼球查看任何編譯的代碼。我用翡翠和SCSS在這裏。該頁面還運行Normalize.css）

有了這個技術，我們只需要一個Event.stopPropagation()阻止類似事件從模態冒泡到其容器中。點擊模式容器上的任何位置都會關閉模式，小關閉按鈕也會關閉。你可以擴展這個以滿足你的需求，關鍵是模態不應該冒泡到它的容器中。

var open = $('.modal-open'), 
     close = $('.modal-close'), 
     modal = $('.modal'), 
     container = $('.modal-container'); 

    function openModal (e) { 
    container.addClass('active'); 
    } 

    function closeModal (e) { 
    container.removeClass('active'); 
    } 

    open.on('mouseup', openModal); 

    close.on('mouseup', closeModal); 
    container.on('mouseup', closeModal); 

    modal.on('mouseup', function (e) { 
    e.stopPropagation(); 
    });

（請記住一些這方面的東西是IE9 +。如果您有遺留需求，請務必檢查瀏覽器的兼容性。）

來源

2015-04-20 08:25:26 Oka

我現在明白多一點的東西

$('element').click(function (e) { 
    e.stopPropagation(); 
});

是。這用於而不是執行目標元素的點擊功能。我需要做一些更多的閱讀，但我通過使用這段代碼來解決這個問題，目標是div.modal-window-content。

來源

2015-04-20 06:31:42 Dallan

單擊表單上的「提交」關閉模式窗口

回答

相關問題