bootstrap 2 modal

1.md

Bootstrap 2 Afterpay modal

CSS

2.html

<p style="margin-top:15px;"><a data-toggle="modal" data-target="#afterpayModal" href="#"><img src="https://www.barefoothealing.com.au/assets/images/apblue.png" style="max-width: 300px;border:1px solid #000; border-radius:4px;"> More info</a>.</p>
<p>Make [@REFERRAL_KEY1@] interest-free payments of <strong>[%format type:'currency'%][%calc [@store_price@]/[@REFERRAL_KEY1@] /%][%/format%]</strong> over 8 weeks and get it now</p>
<link rel="stylesheet" type="text/css" href="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/afterpay.css" media="all"/>
<div class="modal fade" id="afterpayModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content ap-content">
            <div class="ap-header">
                <div class="ap-row">
                    <div class="ap-col-6">
                        <button type="button" class="ap-close ap-pull-right" data-dismiss="modal">Close &times;</button>
                    </div>
                </div>
                <div class="ap-row">
                    <div class="span7">
                        <img alt="Afterpay" width="145" src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/afterpaylogo.svg">
                        <h2>Shop Now. Pay Later. <br>100% Interest-free.</h2>
                        <p>Simple instalment plans available instantly at checkout</p>
                    </div>
                    <div class="span6">
                        <img class="ap-screen" src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/afterpaycart.png">
                    </div>
                </div>
            </div>
            <div class="ap-row">
                <div class="span4 ap-center">
                    <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step1.svg">
                    <h4>Select Afterpay as your payment method</h4>
                    <p>Use your existing debit or credit card</p>
                </div>
                <div class="span4 ap-center">
                    <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step2.svg">
                    <h4>Complete your checkout in seconds</h4>
                    <p>No long forms, instant approval online</p>
                </div>
                <div class="span4 ap-center">
                        <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step3.svg">
                        <h4>Pay over 4 equal instalments</h4>
                        <p>Pay fortnightly, enjoy your purchase straight away!</p>
                </div>
            </div>
            <div class="ap-row">
                <div class="ap-col-6 ap-terms">
                    <hr>
                    <p><strong>All your need is:</strong></p>
                    <p>1) An Australian Visa or Mastercard debit/credit card; 2) To be over 18 years of age; 3) To live in Australia</p>
                    <p>To see Afterpay's complete terms, visit <a href="https://www.afterpay.com.au/terms" target="_blank">https://www.afterpay.com.au/terms</a></p>
                    <p class="ap-center">
                        &copy; [%format type:'date' format:'#Y'%]now[%/format%] Afterpay
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

style.css

#afterpayModal{
	z-index: 999999;
}
#afterpayModal .ap-header{
	padding: 15px 40px 0px;
}