Eujene
@Eujene
Айти или не айти?

Почему плагин modal рендерится без вызова?

Привет)

У меня экземпляр priceModel плагина modal начал рендерится без вызова вместе со всей страницей. Подскажите, пожалуйста, в чем причина?

Git https://gitlab.com/bykov.ey/constructor

const fruits = [
    {
        id: 1,
        title: 'apple',
        price: 20,
        img: 'https://st.depositphotos.com/1003272/1632/i/600/depositphotos_16322913-stock-photo-red-apple.jpg'
    },
    {
        id: 2,
        title: 'orange',
        price: 30,
        img: 'https://foodcity.ru/storage/products/October2018/6XZSr6ddCl6cxfo0UchP.jpg'
    },
    {
        id: 3,
        title: 'mango',
        price: 40,
        img: 'https://i0.wp.com/fructi.ru/wp/wp-content/uploads/2016/06/mango.png?resize=700%2C700'
    },
]

const toHtml = fruit => `
    <div class="col">
        <div class="card" >
            <img src="${fruit.img}" class="card-img-top" style="height: 300px; width: 300px;" alt="${fruit.title}">
            <div class="card-body">
                <h5 class="card-title">${fruit.title}</h5>
                <a href="#" class="btn btn-primary" data-btn="price" data-id="${fruit.id}">Show price</a>
                <a href="#" class="btn btn-danger" data-btn="remove" data-id="${fruit.id}">Remove</a>
            </div>
            </div>
    </div>
`

function render() {
    const html = fruits.map(toHtml).join('')
    document.querySelector('#fruits').innerHTML = html
}

render()

const priceModelOptions = {
    title: 'price to product',
    closable: false,
    width: '400px',
    footerButtons: [
        {
            text: 'Close',
            tipe: 'primary',
            handler () {
                priceModel.close()
            }
        }
    ]
}

const priceModel = $.modal(priceModelOptions);

document.addEventListener('click', event => {
    event.preventDefault()
    const id = +event.target.dataset.id
    const btnType = event.target.dataset.btn
    
    if ( btnType === 'price') {
        const fruit = fruits.find(f => f.id === id)
        priceModel.setContent(`
            <p> price for ${fruit.title}: <strong> ${fruit.price}$ </strong> </p>
        `)
        priceModel.open()
    }
    
    if(btnType === 'remove'){
        $.confirm({
            title: 'Are you sure?',
            content: `<p> Remove ${fruit.title}?</p>`
        }).then(() =>
            console.log('remove')
            )
            .catch(() =>
                console.log('Cancel')
            )
    }
})
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект