Home Forums EZY Template Open an Iframe in a modal popup?

This topic contains 9 replies, has 3 voices, and was last updated by  hostingames 3 months, 4 weeks ago. This post has been viewed 300 times

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10026069

    hostingames
    Participant

    Hi,

    My request is to open an Iframe in a modal popup
    As on the html code example here
    This code it works on the other tempate, but not on the ezy template

    Or maybe it’s missing a js code?

    Thank you


    #10026070

    hostingames
    Participant
    #10026079

    Support
    Keymaster

    Hello, to open an iframe in a popup here’s what you can do:

    HTML:

    <a class="popup-iframe" href="http://www.okler.net">Open Iframe Popup</a>

    JS:

    $(document).ready(function() {
    	$('.popup-iframe').magnificPopup({
    		disableOn: 700,
    		type: 'iframe',
    		mainClass: 'mfp-fade',
    		removalDelay: 160,
    		preloader: false,
    		fixedContentPos: false
    	});
    });

    Regards.


    #10026086

    hostingames
    Participant
    This reply has been marked as private.
    #10026106

    Support
    Keymaster

    Hello, please check below the responsive table with the classes you need to use to show the elements depending on the resolution:

    Screen Size Class
    Hidden on all d-none
    Hidden only on xs d-none d-sm-block
    Hidden only on sm d-sm-none d-md-block
    Hidden only on md d-md-none d-lg-block
    Hidden only on lg d-lg-none d-xl-block
    Hidden only on xl d-xl-none
    Visible on all d-block
    Visible only on xs d-block d-sm-none
    Visible only on sm d-none d-sm-block d-md-none
    Visible only on md d-none d-md-block d-lg-none
    Visible only on lg d-none d-lg-block d-xl-none
    Visible only on xl d-none d-xl-block

    And here’s the table with the breakpoints:

    Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix col- col-sm- col-md- col-lg- col-xl-
    # of columns 12
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Column ordering Yes

    • This reply was modified 4 months ago by  Support.
    • This reply was modified 4 months ago by  Support.
    #10026116

    hostingames
    Participant

    Hello, thank you very much

    And for the button that is too big in phone mode?


    • This reply was modified 4 months ago by  hostingames.
    #10026166

    Support2
    Keymaster

    Hello,

    Buttons doesn’t have responsive classes.
    In that case you can create your own responsive class using CSS media queries at (css/custom.css).

    Kind Regards,

    Rodrigo.


    #10026177

    hostingames
    Participant

    Hello,

    Which ones?

    Thank you


    #10026197

    Support2
    Keymaster

    Hello,

    (css/custom.css):

    @media(max-width: 767px) {
        .btn {
            font-size: 0.7rem;
            padding: 0.5rem 1.7rem !important;
        }
    }

    * Try with diferent values.

    Kind Regards,

    Rodrigo.


    #10026201

    hostingames
    Participant

    These are the most suitable values is

    @media(max-width: 767px){.btn{font-size:.7rem;padding: .4rem 0.7rem!important;}}

    Thank you


Viewing 10 posts - 1 through 10 (of 10 total)