Скрыть и показать диалоги, используя JavaScript

Question

Скрыть и показать диалоги, используя JavaScript

0

То, что я пытаюсь сделать, - это когда вы нажимаете кнопку с классом ".option", она отображает div с идентификатором "#dialog", а затем добавит класс. Active к нажатой кнопке (возможно, более одной кнопки, которая показывает разные диалоги позже), а также добавление к телу класса ".noScroll". Когда диалог показан, его можно закрыть, щелкнув в любом месте "#dialog", но НЕ ".dialogPage", который является div, находящимся внутри div "#dialog". Если диалог был закрыт, класс, который был добавлен в тело и на кнопку, должен быть удален.

Вот кнопка, которую нужно нажать, чтобы отобразить диалог:

<a class="option" href="edit_account.php">Your Account</a>

Следующий HTML представляет собой структуру моего диалога:

<div id="dialog">
    <div id="dialogPage" class="dialogPage">
           <p>Edit your account here</p>
    </div>
</div>

Вот связанный CSS:

body {
    color: #4A4A4A;
    background-color: #F7F7F7;
    font-family: 'arial', sans-serif; 
    font-size: 0.95em;
    line-height: 150%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;  
    overflow-y: auto;
    overflow-x: hidden;
}

#dialog {
    display: none;
    background-color: rgba(25,30,37,0.95);
    width: 100%;
    position: fixed; 
    bottom:0; top: 0; left: 0; right: 0;    
    margin-top: 70px;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden; 
}

    .dialogPage {
        background-color: #F7F7F7;
        border: 2px solid #ffffff;

        width: 900px; min-width: 900px; 
        padding: 20px;
        margin: 50px auto;  

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
    }


.noScroll {
    overflow-y: hidden;
    overflow-x: hidden; 
}

Вот JavaScript, который я использую в настоящее время, но, пожалуйста, не строите на нем, так как это неправильно. Я уверен:

$(".option, #dialog").on('click', function() {
    $("#dialog").toggle(29);
    $("body").toggleClass("noScroll");

     if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
        $("#dialog").hide();
    }
});

VLS 12 нояб. 2013, в 19:13

Источник

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

VLS · Answer 1 · 2013-11-12T15-10-00.000Z

Попробуйте следующее:

$('.option').click(function(e) {
    e.preventDefault();
    $('#dialog').show();
    $('body').addClass('noScroll');
    $(this).addClass('active');
    return false;
});

$('#dialog').click(function(e) {
    $(this).hide();
    $('body').removeClass('noScroll');
    $('.option').removeClass('active');
});

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

Я не видел никакого использования класса .active в вашем текущем коде, так что это всего лишь предположение.

Демо: http://jsfiddle.net/verashn/2Xh7d/