CODEWITHSUNDEEP
javascripthtmlcss
zab
zab

Reputation: 95

Popup for Mobile in HTML, CS, JS

I am expecting result: as I've implemented this codes for hover popup in website, as website is dynamic in nature. When I see the result in mobile version, same code is not working.

As I've used js for this, let me know any other way to tackle this situation.

Expected output is in image below:

enter image description here

Here's why I've tried.

jQuery(function($) {
    var pop = $('.map-popup');
      pop.click(function(e) {
            e.stopPropagation();
    });
      
      $('a.marker').mouseenter(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).next('.map-popup').toggleClass('open');
        $(this).parent().siblings().children('.map-popup').removeClass('open');
      });
      
      $(document).click(function() {
            pop.removeClass('open');
      });
      
      pop.each(function() {
            var w = $(window).outerWidth(),
              edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
            if( w < edge ) {
                $(this).addClass('edge');
            }
      });
});
.markerstylea1{
    overflow: auto; 
        height:170px; 
        width:350px; }
        
.map-popup {
        position: absolute;
        left: 58px;
        width: auto;
        transform: translateY(-50%);
        padding: 5px 15px;
}

.map-popup:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -16px;
        margin-top: -16px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 16px 16px 16px 0;
        border-color: transparent #feb830 transparent transparent;
}
        
.map-popup .popup-title{ 
    font-size: 20px!important;
}
      
.map-popup.edge {
        left: auto;
        right: calc(100% + 24px);
}

.map-popup.edge:before {
        left: auto;
        right: -16px;
        border-width: 16px 0 16px 16px;
        border-color: transparent transparent transparent #fff;
}
        
.marker::selection {
        background: #feb82f;
        color: #fff;
        text-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>       
    <a class="marker marker1 markerstyle1a" href="#marker1" >
            <i class="fa fa-thumb-tack" aria-hidden="true"></i>
        </a>
        <aside id="marker1" class="map-popup markerstyle1" >
            <h3 class="popup-title">xyz</h3>
            <p><strong>xyz</strong><br>Lorem ipsum</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia pariatur laudantium deserunt minima delectus illum dolor, nesciunt sit iure, debitis eligendi blanditiis, tempore quidem cupiditate quaerat incidunt sapiente aliquam? Debitis!</p>\
            <a class="btn" href="#">Find Out More</a>
        </aside>
</div>

Upvotes: 0

Views: 128

Answers (1)

Kraishan
Kraishan

Reputation: 455

Unfortunately a mobile device has no 'hover' status as you can only click (touch). There is simply no mouse to trigger a hover state. Another way would be to have the trigger to open the modal on something else for mobile devices, such as a timed trigger or a button.

Upvotes: 3

Related Questions