mobil sitemde geri tuşuna basılınca modal kapansın

21-06-2019, 16:43:46

sitemde bootstrap kullanıyorum mesela modal açıkken kullanıcı telefonundan geri tuşuna bastığında modal kapansın istiyorum bunu nasıl yapabilirim

21-06-2019, 16:57:57

#2

~~tanselkahraman~~

Üyeliği durduruldu

Modalı fazlası ile bende kullanıyorum. Ancak kapanmama olayı ile hiç karşılaşmadım. Sayfa yenilenince bile kapanır. Senin istediğin acaba geri tuşuna basınca önceki sayfaya gitmesin sadece modal kapansın mı?

21-06-2019, 17:06:11

#3

StyleWaR

https://jsfiddle.net/bb20gvx9/ işinize yarayacaktır.

21-06-2019, 17:07:55

#4

hares

tanselkahraman adlı üyeden alıntı: mesajı görüntüle

Modalı fazlası ile bende kullanıyorum. Ancak kapanmama olayı ile hiç karşılaşmadım. Sayfa yenilenince bile kapanır. Senin istediğin acaba geri tuşuna basınca önceki sayfaya gitmesin sadece modal kapansın mı?

evet

StyleWaR adlı üyeden alıntı: mesajı görüntüle

https://jsfiddle.net/bb20gvx9/ işinize yarayacaktır.

deniyorum

StyleWaR adlı üyeden alıntı: mesajı görüntüle

https://jsfiddle.net/bb20gvx9/ işinize yarayacaktır.

ben modalı $("#id").modal();
şeklinde açtırıyordum örnekteki şekilde açmaya çalıştığımda modalı açmıyor

22-06-2019, 12:42:29

#5

marzenbecher

<!DOCTYPE html><html lang="en"><head>    <title>Demo</title>    <meta name="viewport"          content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>    <style type="text/css">        *, *:before, *:after {            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;            margin: 0;            padding: 0;        }        .main {            height: 100vh;            background-color: #dddddd;        }        header{            width: 100vw;            background-color: olivedrab;            color: #fff;        }    </style></head><body><div class="main" id="birinci">    <header>        <h3>            Ilk Sayfa        </h3>        <a class="next">Ileri</a>    </header>    <div class="icerik">    </div></div><div class="main" id="ikinci">    <header>        <h3>            Ikinci Sayfa        </h3>        <a class="back">Geri</a>    </header>    <div class="icerik">    </div></div><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script type="text/javascript">    'use strict';    $(window).on("navigate", (e, data) => {        var direction = data.state.direction;        if (direction == 'back') {            alert('Geri tusuna basildi');        }    });    $('.next').on('click', ()=> {        $.mobile.navigate("#ikinci", {            transition: "slide"        });    });    $('.back').on('click', () => {        $.mobile.navigate("#birinci", {            transition: "slide"        });    });</script></body></html>