Home Forums Porto Template HTML Pop-Up

This topic contains 5 replies, has 2 voices, and was last updated by  Support2 3 days, 8 hours ago. This post has been viewed 121 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10030878

    mbv
    Participant

    Hey Rodrigo, can you provide any sample code for creating an html pop-up window. Right now we have an image for a pop-up but need to add a Vote Now button that we can make into an html link.


    #10030880

    Support2
    Keymaster

    Hello mbv,

    Here is the code you need:

    <a class="lightbox" href="#popupContent" data-plugin-options="{'type':'inline'}">
    	<img class="img-fluid" src="img/projects/project.jpg" alt="Project Image">
    </a>
    
    <div id="popupContent" class="dialog mfp-hide">
    	<img class="img-fluid" src="img/projects/project.jpg" alt="Project Image">
    	<p>Lorem ipsum dolot sit a met</p>
    	<a href="#" class="btn btn-primary">Button</a>
    </div>

    * Make sure you include the “MagnificPopup” JS and CSS on the page.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030882

    mbv
    Participant

    Good morning, looking for a sample for a pop-up on page load that we add to custom.js


    #10030884

    Support2
    Keymaster

    Hello mbv,

    To open on page load this is the code you need in (js/custom.js):

    $(window).on('load', function(){
    	var delay = 1000; // 1 seconds
    
        setTimeout(function(){
            $.magnificPopup.open({
                items: [
                	{
                		src: '<div class="dialog"><p>HTML CONTENT HERE</p></div>'
                	}
                ],
                type: 'inline'
            });
    	}, delay);
    
    });

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030944

    mbv
    Participant

    Hey Rodrigo, need help aligning a drop down in the product dialog window. Can you visit http://www.stickykicksrc.com/purchase.html and click View Details on the SKRC Ti Screws 4 Pack Flat Head product. The widow opens – we are trying to better align the drop down so it is even/horizontal with the Close Window and Add to Cart Button.


    #10030946

    Support2
    Keymaster

    Hello mbv,

    Please follow the steps below:

    1) Add a margin on the close window button:

    <a href="#" class="btn btn-primary custom-close-button mb-xs">Close Window</a>

    2) Change the form to:

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="d-flex align-items-center">

    3) On the select add margin right and remove the margin bottom:

    <select name="os0" class="form-control custom-color-1 mr-xs" style="margin-bottom: 0 !important;">

    * Here the custom-color-1 is forcing a margin-bottom with “!important” on the custom CSS file. Because of that we need add this inline style. You also can do it trough the custom CSS file.

    4) Add in (css/custom.css):

    .d-flex {
    	display: flex !important;
    }
    
    .align-items-center {
    	align-items: center !important;
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 3 days, 8 hours ago by  Support2.
Viewing 6 posts - 1 through 6 (of 6 total)