Использование модального диалогового окна в BOXSlider Использование JavaScript - PullRequest
Новая
       3

Использование модального диалогового окна в BOXSlider Использование JavaScript

0 голосов
/ 12 июля 2020

Я хочу использовать модальное диалоговое окно в BOXSlider, однако я не могу это сделать. Примечание. Когда я удаляю следующий оператор: (mySlider.bxSlider({pager: false});) из JavaScript Code, модальное окно работает, но BOXSlider не работает.

HTML Код: 

<div class="navbar">
    <div class="container">
        <div class="brand fl-left">
            <h2>plus resturent</h2>
        </div>
        <ul class="links fl-left">
            <li class="active"><a href="#" data-value="abt">home</a></li>
            <li><a href="#abt" data-value="abt">about us</a></li>
            <li><a href="#" data-value="abt">galary</a></li>
            <li><a href="#" data-value="test">testimonial</a></li>
            <li><a href="#" data-value="abt">contact us</a></li>
        </ul>
        <div class="clearfix"></div>
    </div>
</div>
<!-- End Nav-Bar -->
<!-- Start Header -->


<div class="header">
    <div class="overlay">
        <ul class="bxslider">
            <li>
                <h2></h2>
                <h3></h3>
                <p></p>
                <button class="btn" id="mybtn">creat account</button>
                <div id="mymodal" class="modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="close" id="spn">&times;</span>
                            <h2>modal header</h2>
                        </div>
                        <div class="modal-body">
                            <p>kkcmsakfm.sdf</p>
                        </div>
                        <div class="modal-footer">
                            <h3>dgdsg</h3>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <h2></h2>
                <h3></h3>
            </li>
            <li>
                <h2></h2>
                <h3></h3>
            </li>
        </ul>
    </div>
</div>
<!-- End Header -->

JavaScript Код: 

/*global $, alert, console*/
$(function () {
    'use strict';
    //Adjust Header Height
    var myheader = $('.header');
    var mySlider = $('.bxslider');
    myheader.height($(window).height());
    myheader.width($(window).width());
    $(window).resize(function () {
        myheader.height($(window).height());
        myheader.width($(window).width());
        mySlider.each(function () {
            $(this).css('paddingTop', ($(window).height() - $('.bxslider li').height()) / 2);
        });
    });

    //Add Links Active
    $('.links li a').click(function () {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });

    //Smoth Scroll To Div
    $('.links li a').click(function () {
        $('html, body').animate({
            scrollTop: $('#' + $(this).data('value')).offset().top
        }, 1000);
    });

    //Adjust BoxSlider Center
    mySlider.each(function () {
        $(this).css('paddingTop', ($(window).height() - $('.bxslider li').height()) / 2);
    });

    //Trigger BoxSlider
    mySlider.bxSlider({
        pager: false
    });
    //The Modal
    const mymodal = document.getElementById('mymodal');
    const close = document.querySelector('#mymodal .close');
    const mybtn = document.getElementById('mybtn');
    mybtn.addEventListener('click', () => {
        mymodal.style.display = 'block';
    })
    close.addEventListener('click', () => {
        mymodal.style.display = 'none';
    })
});

CSS Код: 

/* Start Global */

.container {
    width: 1200px;
    margin: auto;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* End Global */

/* Start Nav-Bar */

.navbar {
    font-size: 18px;
    height: 0; /* to make navbar transparent */
    position: relative;
    z-index: 2;
}

.navbar .brand {
    width: 40%;
}

.navbar .brand h2 {
    color: #1ABC9C;
    text-transform: uppercase;
    font-weight: bold;
    font-family: italic;
}

.navbar .links {
    width: 60%;
    margin-top: 15px;
}

.navbar .links li {
    display: inline-block;
    padding: 10px 0;
    margin: 0 20px;
    border-bottom: 2px solid transparent;
}

.navbar .links li.active a,
.navbar .links li a:hover {
    color: #1ABC9A;
    border-bottom: 1.6px solid #1ABC9C;
}

.navbar .links li a {
    text-decoration: none;
    text-transform: capitalize;
    color: #FFF;
}

/* End Nav-Bar */
/*Start Header*/

.header {
    background-image: url(../images/1.jpg);
    background-size: cover;
    background-position: 0;
    position: relative; /* to make overlay take all space */
}

.header .overlay {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute; /* to make overlay full screen */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.header .bx-viewport {
    height: 100% !important;
}

.header .bx-wrapper {
    border: 0;
    box-shadow: none;
    background: none;
    text-align: center;
    height: 100%;
}

.header .bxslider li {
    display: block;
}

.header .bxslider li h2 {
    font-size: 80px;
    font-weight: bold;
    color: #FFF;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.header .bxslider li span {
    color: #1abc9c;
    font-family: 'Pacifico', cursive;
    font-weight: bolder;
}

.header .bxslider li p {
    color: #FFF;
    font-size: 25px;
    text-transform: capitalize;
}

/*Design Modal*/
.header .bxslider li button {
    border: 2px solid #1ABC9C;
    background-color: #1ABC9C;
    color: #FFF;
    width: 140px;
    padding: 10px 10px;
    text-align: center;
    text-transform: capitalize;
}

.header .bxslider li button:hover {
    border-bottom-right-radius: 7px;
    color: #D4CCCC;
    transition-duration: 1s;
    transition-delay: 0.1s;
    cursor: pointer;
}

.header .bxslider li button:focus {
    outline: none
}

.header .bxslider li .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.header .bxslider li .modal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.header .bxslider li .modal .modal-content .modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.header .bxslider li .modal .modal-content .modal-body {
    padding: 2px 16px;
}

.header .bxslider li .modal .modal-content .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.header .bxslider li .modal .modal-content .modal-header .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.header .bxslider li .modal .modal-content .modal-header .close:hover,
.header .bxslider li .modal .modal-content .modal-header .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

//animation

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

//animation

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/*End Design Modal*/
/*End Header*/
...