Modal
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
Desktop
BLS Course Videos in Streaming Format (for Instructors)
Product Number : 15-1414
ISBN: 978-1-61669-653-5
Heartsaver
eLearning
Online CourseOnline CourseVerify
INTERNATIONAL shipping to addresses outside the United State is not available at this time.
$ 200$ 350
BLS Course Videos in Streaming Format (for Instructors)
Product Number : 15-1414
ISBN: 978-1-61669-653-5
HeartsavereLearningOnline CourseOnline CourseVerify
INTERNATIONAL shipping to addresses outside the United State is not available at this time.
$ 200$ 350
HTML
<div class="modal fade show aha-card-modal aui-quickviewpopup" id="modal1" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg aha-card-modal" >
<div class="modal-content">
<div class="aui-quik-close d-flex">
<button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row no-gutters align-items-start">
<div class="col-12 col-sm-3 modal-head-img">
<img src="../../images/modal-img.png" class="mx-auto mx-sm-0 modal-card-img col-sm-12 p-0 d-block" alt="card head" />
</div>
<div class="col-12 col-sm-9 modal-card-body">
<div class="d-block modal-card-title p-0 mb-4">
<h3 class="h3 m-0" aria-describedby="BLS Course Videos in Streaming Format (for Instructors)">BLS Course Videos in Streaming Format (for Instructors)</h3>
</div>
<div class="modal-card-detail d-flex mb-2">
<div aria-describedby="Product Number : 15-1414">Product Number : 15-1414</div>
<div class="aui-lft-line" aria-describedby="ISBN : 978-1-61669-643-6">ISBN: 978-1-61669-653-5</div>
</div>
<div class="py-2 py-sm-3 aui-quickviw-label">
<div class="tag" aria-label="Heartsaver"><img src="../../images/Heartsaver.svg" alt="heart saver" /><span>Heartsaver</span></div>
<div class="tag" aria-label="eLearning"><img src="../../images/ACLS.svg" alt="heart saver" /><span>eLearning</span></div>
<div class="tag" aria-label="Online Course"><img src="../../images/Online-course.svg" alt="heart saver" /><span>Online Course</span></div>
<div class="tag" aria-label="Online Course"><img src="../../images/Online-course.svg" alt="heart saver" /><span>Online Course</span></div>
</div>
<div class="aui-sec-id">
<p class="m-0"><label for="securityId">Security ID:</label><input type='text' id="securityId" /><span class="aui-verifytxt">Verify</span></p>
</div>
<div class="aui-quickviw-ship mt-4">
<p class="m-0">INTERNATIONAL shipping to addresses outside the United State is not available at this time.</p>
</div>
<div class="row mt-3 mt-sm-5">
<div class="aui-quickpop-bot d-flex col-12 col-sm-12 justify-content-between align-items-center flex-row-reverse flex-sm-row">
<div class="aui-quickviw-price">
<span class="modal-card-price">$ 200</span>
<span class="modal-card-spec-price ml-3">$ 350</span>
</div>
<div class="form-inline flex-nowrap">
<label class="mr-3" for="inlineFormCustomSelect">Quantity</label>
<select class="custom-select form-control-sm pl-3 pr-4" id="inlineFormCustomSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="d-flex justify-content-end mt-4 mt-lg-0">
<button type="button" class="btn btn-round btn-primary modal-addcart" aria-label="Add to Cart">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Desktop
BLS Course Videos in Streaming Format (for Instructors)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
BLS Course Videos in Streaming Format (for Instructors)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
HTML
<div class="modal fade show" id="modal-card" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg aha-card-modal">
<div class="modal-content">
<div class="modal-body p-0">
<button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row no-gutters">
<div class="col-12 col-sm-4 modal-head-img">
<img src="../../images/modal-img.png" class="mx-auto mx-sm-0 modal-card-img col-sm-12 p-0 d-block" alt="card head" />
</div>
<div class="col-12 col-sm-8 modal-card-body">
<a href="#" class="d-block modal-card-title p-0 pr-sm-5 mb-2">
<h3 class="h3" aria-describedby="BLS Course Videos in Streaming Format (for Instructors)">BLS Course Videos in Streaming Format (for Instructors)</h3>
</a>
<div class="modal-card-detail">
<div class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Desktop
Upload Documents
Upload Documents
HTML
<div class="modal fade show aui-modal" id="modalTemplate3" tabindex="-1" aria-labelledby="modalTitle" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="modalTitle">Upload Documents</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="aha-icon-cross"></span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row required">
<label htmlFor="title" class="col-md-5">Title</label>
<div class="col-md-7">
<input required class="form-control" type="text" id="title" />
</div>
</div>
<div class="form-group row required">
<label htmlFor="selectProgram" class="col-md-5">Selected Program</label>
<div class="col-md-7">
<input required class="form-control" type="text" id="selectProgram" value="Primary" disabled />
</div>
</div>
<div class="form-group row required">
<label htmlFor="selectStd" class="col-md-5">Select Standard</label>
<div class="col-md-7">
<select class="form-control" id="selectStd">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row required">
<label htmlFor="description" class="col-md-5">Description</label>
<div class="col-md-7">
<textarea class="form-control" id="description" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label htmlFor="message" class="col-md-5">Message (If any)</label>
<div class="col-md-7">
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-7 offset-md-5">
<button class="btn btn-primary btn-round">Submit</button>
</div>
</div>
</div>
</div>
</div>Desktop
Are you sure you want to delete this file?
Are you sure you want to delete this file?
HTML
<div class="modal fade show aui-modal" id="modalTemplate4" tabindex="-1" aria-labelledby="modalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-body p-0">
<div class="text-center">
<p>Are you sure you want to delete this file?</p>
<div class="mt-4">
<button class="btn btn-primary btn-round btn-sm mx-2">Yes</button>
<button class="btn btn-secondary btn-round btn-sm mx-2" data-dismiss="modal" aria-label="Close">No</button>
</div>
</div>
</div>
</div>
</div>
</div>Desktop
Who are you ordering for today?
If you do to see your Training Center or company below, you can select Myself or create a new organization account.
Who are you ordering for today?
If you do to see your Training Center or company below, you can select Myself or create a new organization account.
HTML
<div class="modal fade show aui-org-modal aui-modal" id="modaltemplate5" tabindex="-1" aria-labelledby="ordermodal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="h4" id="ordermodal">Who are you ordering for today?</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="aha-icon-cross"></span>
</button>
</div>
<div class="modal-body p-0">
<p>If you do to see your Training Center or company below, you can select Myself or create a new organization account.</p>
<div class="mt-4" role="radiogroup">
<div class="form-group form-radio">
<input type="radio" name="radio" id="opt1" value="opt1" />
<label for="opt1">None. I'm buying for myself</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="opt2" value="opt2" />
<label for="opt2">Columbia Asia</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="opt3" value="opt3" />
<label for="opt3">Company A</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="opt4" value="opt4" />
<label for="opt4">Company B</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="opt5" value="opt5" />
<label for="opt5">Create New Organization</label>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary btn-round">Continue</button>
</div>
</div>
</div>
</div>Desktop
New Organization
New Organization
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="orgNew" tabindex="-1" aria-labelledby="orgModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="orgModal">New Organization</h4>
</div>
<form>
<div class="modal-body p-0">
<p>Enter or select your AHA Training Center ID number</p>
<div class="form-group row required">
<label class="col-md-5 col-lg-4 col-form-label" for="trainingCenterId">Training Center ID Number</label>
<div class="col-md-7 col-lg-8">
<input type="text" class="form-control" id="trainingCenterId" required />
</div>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex flex-row-reverse mb-4">
<button class="btn btn-primary btn-round">Next</button>
<button class="btn btn-secondary btn-round mr-4">Cancel</button>
</div>
<div class="d-flex flex-row-reverse">
<a href="#" class="font-red">I don't have a TC ID Number <i class="aha-icon-arrow-right"></i></a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
New Organization
New Organization
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="newOrganizationModal" tabindex="-1" aria-labelledby="newOrgModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="newOrgModal">New Organization</h4>
</div>
<form>
<div class="modal-body p-0">
<div class="form-group row required">
<label class="col-md-5 col-lg-4 col-form-label" for="companyName">Company Name</label>
<div class="col-md-7 col-lg-8">
<input type="text" class="form-control" id="companyName" required />
</div>
</div>
<div class="form-group row">
<label class="col-md-5 col-lg-4 col-form-label" for="UsTaxId">US Tax ID</label>
<div class="col-md-7 col-lg-8">
<input type="text" class="form-control" id="UsTaxId" />
</div>
</div>
<div class="form-group row">
<label for="select" class="col-md-5 col-lg-4 col-form-label" for="taxStatus">Tax Exempt Status</label>
<div class="col-md-7 col-lg-8">
<select class="form-control" id="taxStatus">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex flex-row-reverse">
<button class="btn btn-primary btn-round">Next</button>
<button class="btn btn-secondary btn-round mr-4">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
New Organization
New Organization
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="modal2" tabindex="-1" aria-labelledby="newOrgModalTitle" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="newOrgModalTitle">New Organization</h4>
</div>
<form>
<div class="modal-body p-0">
<div class="d-block mb-4">Do you have a <a>Training Central</a> account? Please enter the Training Center Purchase code you would you like to use for <b>Company AB</b>. This allows us to automatically send your eLearning and eBook inventory to your Training Central account after Purchase.</div>
<div class="form-group row">
<label for="select" class="col-md-5 col-lg-4 col-form-label" for="purchaseCode">Purchase Code</label>
<div class="col-md-7 col-lg-8">
<select class="form-control" id="purchaseCode">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex flex-row-reverse mb-4">
<button class="btn btn-primary btn-round">Next</button>
<button class="btn btn-secondary btn-round mr-4">Cancel</button>
</div>
<div class="d-flex flex-row-reverse">
<a href="#" class="font-red">I don't have a TC ID Number <i class="aha-icon-arrow-right"></i></a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
New Organization
New Organization
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="org9" tabindex="-1" aria-labelledby="newOrgModalTitle1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="newOrgModalTitle1">New Organization</h4>
</div>
<form>
<div class="modal-body p-0">
<div class="form-group row">
<div class="col-sm-6">
<label htmlFor="billTo">Bill To</label>
<input type="text" class="form-control" id="billTo" />
</div>
<div class="col-sm-6">
<label htmlFor="department">Department</label>
<input type="text" class="form-control" id="department" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 aui-required">
<label htmlFor="billingEmailAddress">Billing Email Address</label>
<input type="text" class="form-control" id="billingEmailAddress" />
</div>
<div class="col-sm-6">
<label htmlFor="billingEmailAddressCC">Billing Email CC</label>
<input type="text" class="form-control" id="billingEmailAddressCC" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 aui-required">
<label htmlFor="phNo">Phone Number</label>
<input type="text" class="form-control" id="phNo" />
</div>
<div class="col-sm-6 aui-required">
<label htmlFor="streetAddress">Street Address</label>
<input type="text" class="form-control" id="streetAddress" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label htmlFor="aptSuites">Apt, Suites, Others</label>
<input type="text" class="form-control" id="aptSuites" />
</div>
<div class="col-sm-6">
<label htmlFor="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 aui-required">
<label htmlFor="stateRegion">State/Region</label>
<select class="form-control" id="stateRegion">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="col-sm-6 aui-required">
<label htmlFor="inputLastname">Postal Code</label>
<input type="number" class="form-control" id="inputLastname" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 aui-required">
<label htmlFor="inputCountryName">Country</label>
<select class="form-control" id="inputCountryName">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex flex-row-reverse">
<button class="btn btn-primary btn-round">Next</button>
<button class="btn btn-secondary btn-round mr-4">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
Terms and Condition
Terms and Condition
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="tncModal" tabindex="-1" aria-labelledby="tncModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="tncModal">Terms and Condition</h4>
</div>
<form>
<div class="modal-body p-0">
<div class="d-flex mb-4">Please accept the Terme and Condition and Privacy Policy to continue.</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="radio1" value="option1" />
<label for="radio1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="radio2" value="option2" />
<label for="radio2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check1" />
<label for="check1">
Send me communication about AHA training and products for CPR and first aid.
</label>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex justify-content-end">
<button class="btn btn-primary btn-round">Accept and Continue</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
Warning: Credit Card Purchase Limit
Warning: Credit Card Purchase Limit
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="cc" tabindex="-1" aria-labelledby="modalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="h4" id="modalLabel">Warning: Credit Card Purchase Limit</h4>
</div>
<form>
<div class="modal-body p-0">
<div class="d-flex flex-wrap mb-4">Your cart subtotal has exceeded the maximum allowed credit card purchase amount of <b class="mx-2">$10,000.00</b>. Please remove items from your cart, or for eligible accounts, select the invoicing option at checkout.</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex justify-content-end">
<button class="btn btn-primary btn-round">Continue</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
Credit Card Details
Credit Card Details
HTML
<div class="modal fade show aui-org-modal aui-new-org aui-modal aui-cc-number" id={id} tabIndex="-1" aria-labelledby="cc-title" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"><h4 class="h4" id="cc-title">Credit Card Details</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="aha-icon-cross"></span></button></div>
<form>
<div class="modal-body p-0">
<div class="cc-detail-img mb-4 pb-3">
<img src="../../images/cc-detail.svg" class="img-fluid" role="presentation" alt="credit card image" />
</div>
<div class="form-group row">
<div class="col-12 col-sm-12">
<label htmlFor="cc-number">Credit Card Number<span class="cc-star"> *</span></label>
<input type="text" class="form-control" id="cc-number" />
</div>
</div>
<div class="form-group row mt-4">
<label htmlFor="expirationDate" class="col-sm-12">Expiration Date<span class="cc-star"> *</span></label>
<div class="col-6 col-sm-4 col-lg-6">
<select class="form-control">
<option selected disabled>Month</option>
<option>January</option>
<option>February</option>
<option>July</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="col-6 col-sm-4 col-lg-6">
<select class="form-control">
<option selected disabled>Year</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</select>
</div>
</div>
<div class="form-group row mt-4">
<label htmlFor="ccv-number" class="col-12 col-sm-12">Card Verification Number<span class="cc-star"> *</span></label>
<div class="col-5 col-sm-3 col-lg-4">
<input type="text" class="form-control" id="ccv-number" />
</div>
<div class="col-5 col-sm-5 pl-0 pl-sm-2">
<img src="../../images/CVV.svg" class="img-fluid cvv-img" role="presentation" alt="cvv help" />
</div>
</div>
</div>
<div class="modal-footer mt-4">
<div class="w-100">
<div class="d-flex float-sm-right float-lg-none">
<button class="btn btn-primary btn-round btn-block">Submit Payment</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Desktop
Log In To Checkout
Log In To Checkout
HTML