Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Share your thoughts

#### Modal

##### Bootstrap Modals

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

##### Code Explanation for Bootstrap Modal Button

    									/* Use For Static Modal Button */

    										<div class="card-block button-list">
    											<button type="button" class="btn btn-default waves-effect" data-toggle="modal" data-target="#default-Modal">Static</button>
    										/* Modal */
    												<div class="modal fade modal-flex" id="default-Modal" tabindex="-1" role="dialog">
    													<div class="modal-dialog" role="document">
    														<div class="modal-content">
    															<div class="modal-header">
    																<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    																	<span aria-hidden="true">×</span>
    																</button>
    																<h4 class="modal-title">Modal title</h4>
    															</div>
    															<div class="modal-body">
    																<h5>Large Modal</h5>
    																<p>Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus>dolorsit.onsectetur adipiscing</p>
    															</div>
    															<div class="modal-footer">
    																<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
    																<button type="button" class="btn btn-primary waves-effect waves-light ">Save change></button>
    															</div>
    														</div>
    													</div>
    												</div>

    										/* Use For Large Bootstrap Button */

    										<button type="button" class="btn btn-primary waves-effect" data-toggle="modal" data-target="#large-Modal">Large</button>
    										/*  Modal */
    											<div class="modal fade" id="large-Modal" tabindex="-1" role="dialog">
    												<div class="modal-dialog modal-lg" role="document">
    													<div class="modal-content">
    														<div class="modal-header">
    															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    																<span aria-hidden="true">×</span>
    															</button>
    															<h4 class="modal-title">Modal title</h4>
    														<div>
    														<div class="modal-body">
    															<h5>Default Modal</h5>
    															<p>This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
    														</div>
    														<div class="modal-footer">
    															<button type="button" class="btn btn-default waves-effect " data-dismiss="modal">Close</button>
    															<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
    														</div>
    													</div>
    												</div>
    											</div>

    											/* Use For Small Bootstrap Button */

    											<button type="button" class="btn btn-success waves-effect" data-toggle="modal" data-target="#small-Modal">Small</button>
    												/* Modal */
    												<div class="modal fade" id="small-Modal" tabindex="-1" role="dialog">
    													<div class="modal-dialog modal-sm" role="document">
    														<div class="modal-content">
    															<div class="modal-header">
    																<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    																	<span aria-hidden="true">×</span>
    																</button>
    																<h4 class="modal-title">Modal title</h4>
    															</div>
    															<div class="modal-body">
    																<h5>Small Modal</h5>
    																<p>Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
    															</div>
    															<div class="modal-footer">
    																<button type="button" class="btn btn-default waves-effect " data-dismiss="modal">Close</button>
    															</div>
    														</div>
    													</div>
    												</div>

    										</div>
    										/* end of buttom list class */

#### Modal title

##### Large Modal

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

#### Modal title

##### Default Modal

This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

#### Modal title

##### Small Modal

Lorem ipsum dolor sit amet, consectetur adipiscing .

##### Custom Modals

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

##### Code Explanation for Custom Modal Button

    									/* Use For Tabs Modal Button */

    									<div class="card-block button-list">

    									 	<button type="button" class="btn btn-warning waves-effect" data-toggle="modal" data-target="#Modal-tab">Tabs</button>
    									 	/* Modal */
    									 	<div class="modal fade" id="Modal-tab" tabindex="-1" role="dialog">
    									 		<div class="modal-dialog" role="document">
    									 			<div class="modal-content">
    									 				<div class="modal-body">
    									 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    									 						<span aria-hidden="true">×</span>
    									 					</button>
    									 					<ul class="nav nav-tabs" role="tablist">
    									 						<li class="nav-item">
    									 							<a class="nav-link active" data-toggle="tab" href="#tab-home" role="tab">Home</a>
    									 						</li>
    									 						<li class="nav-item">
    									 							<a class="nav-link" data-toggle="tab" href="#tab-profile" role="tab">Profile</a>
    									 						</li>
    									 						<li class="nav-item">
    									 							<a class="nav-link" data-toggle="tab" href="#tab-messages" role="tab">Messages</a>
    									 						</li>
    									 						<li class="nav-item">
    									 							<a class="nav-link" data-toggle="tab" href="#tab-settings" role="tab">Settings</a>
    									 						</li>
    									 					</ul>

    									 					<div class="tab-content modal-body">
    									 						<div class="tab-pane active" id="tab-home" role="tabpanel">
    									 							<h6>Home</h6><p>Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing</p>
    									 						</div>
    									 						<div class="tab-pane" id="tab-profile" role="tabpanel">
    									 							<h6>Profile</h6><p>Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing</p>
    									 						</div>
    									 						<div class="tab-pane" id="tab-messages" role="tabpanel">
    									 							<h6>Messages</h6><p>Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing</p>
    									 						</div>
    									 						<div class="tab-pane" id="tab-settings" role="tabpanel">
    									 							<h6>Settings</h6><p>Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing</p>
    									 						</div>
    									 					</div>
    									 				</div>
    									 			</div>
    									 		</div>
    									 	</div>

    									</div>

    									/* Use For Overflow Modal Button */

    									<button type="button" class="btn btn-danger waves-effect" data-toggle="modal" data-target="#Modal-overflow">Overflow</button>
    			                       /* Modal */
    			                        <div class="modal fade modal-flex" id="Modal-overflow" tabindex="-1" role="dialog">
    			                            <div class="modal-dialog" role="document">
    			                                <div class="modal-content">
    			                                    <div class="modal-body model-container">
    													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    														<span aria-hidden="true">×</span>
    													</button>
    			                                        <h5 class="font-header">Some text above the scrollable box</h5>
    			                                        <p>This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
    			                                        <div class="overflow-container">
    			                                            <h5>Overflow container</h5></div>
    			                                            <img src="assets/images/Modal/overflow.jpg" alt="" class="img img-fluid"/>
    			                                            <p class="p-t-15">Similique velit aut et cumque illum consequatur doloribus quis ipsam sunt sint qui impedit nihil voluptate animi nesciunt corporis aspernatur quaerat sed rem voluptas commodi magnam porro eum sunt quis ullam aut odit laudantium quia soluta corrupti aut qui officiis hic voluptatibus aut itaque voluptates qui expedita minus autem aliquid et debitis omnis provident quia voluptate illo tempora illum maiores perferendis dolorem recusandae ut reprehenderit ad est eum occaecati quam non et quod amet illo id doloremque vitae porro porro sit amet voluptatem quia laboriosam aliquam quia quis facilis eveniet dolorum sunt neque rerum earum ut eaque ab tenetur quia nam quis rerum cumque eos excepturi nostrum qui distinctio porro enim vitae eligendi accusantium quia possimus et autem error repellendus vitae ad quia laborum minima autem nulla optio ad ea nobis animi illo voluptates cum recusandae temporibus voluptate amet quam excepturi odio quia suscipit inventore et rerum quos rerum aut doloribus aut consequatur earum impedit reiciendis saepe voluptates exercitationem maxime culpa saepe ducimus culpa ut aliquam magnam aut veniam sit totam architecto vel distinctio aspernatur aut qui labore quaerat rerum voluptatem sapiente sint sed explicabo et hic laboriosam sit nesciunt et minus et aut dignissimos ut porro incidunt sint et nihil id tempora aut et illum molestiae aperiam minus earum repellendus tempora illo itaque amet facilis quia rem iure quod corrupti dolores et sequi sunt ipsa labore quia unde qui blanditiis ut eos at quia beatae sit repellat quibusdam neque natus expedita sed perspiciatis atque quas voluptatem autem velit enim qui omnis molestiae et repellat sapiente corporis ipsam sed veritatis in quo quod et occaecati quia rerum iusto cumque accusamus numquam sunt quo sequi id molestiae consequatur doloribus molestiae autem nisi nostrum blanditiis et nihil sed nobis incidunt omnis quos minima eius quo accusamus qui ea minus aut est tempora quia inventore ad delectus vel et accusamus fuga eius ipsa aliquam alias sint maxime quae enim atque corrupti libero eos nesciunt et voluptas velit numquam illo non qui quaerat enim omnis et ex asperiores inventore quisquam est enim labore ut nobis consequatur fuga ut quo vel molestiae alias eius quod aspernatur laudantium pariatur eius fuga inventore esse at alias repudiandae perspiciatis id qui fuga consequatur recusandae atque iste commodi sapiente eaque labore ipsa aut sint quo vel recusandae ab iusto ducimus minus voluptas ex et illo commodi ipsa pariatur qui quae adipisci saepe dicta delectus nostrum illum incidunt laboriosam est maxime eum debitis et explicabo quia doloribus quod occaecati tempore tempora labore nihil enim recusandae et dolorum temporibus molestiae sint non porro neque minus provident reprehenderit similique illum voluptate qui dicta dolorum totam quia ut nihil dolore fugiat laboriosam molestiae eveniet omnis consequatur non magni nemo consequatur laboriosam non facilis harum eaque illo pariatur rerum dolores quis autem nemo aut enim tenetur pariatur et non quam repudiandae quia aliquam sunt corporis aperiam natus aut reprehenderit non non illum cum laboriosam nulla quaerat eligendi laudantium perspiciatis.</p>
    			                                        </div>
    												<div class="p-15">
    			                                        <h5 class="font-header">Some text above the scrollable box</h5>
    			                                        <p>This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
    												</div>
    			                                   </div>
    			                                </div>
    			                            </div>

    										/* use for light box Modal Button */

    										<button type="button" class="btn btn-info waves-effect" data-toggle="modal" data-target="#Modal-lightbox">Light Box?</button>
    										/* Modal */
    										<div class="modal fade" id="Modal-lightbox" tabindex="-1" role="dialog">
    											<div class="modal-dialog" role="document">
    												<div class="modal-content">
    													<div class="modal-body">
    														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    															<span aria-hidden="true">×</span>
    														</button>
    														<img src="assets/images/Modal/overflow.jpg" alt="" class="img img-fluid"/>
    													</div>
    												</div>
    											</div>
    										</div>

    										/* use for multiple model */

    										<button type="button" class="btn btn-success waves-effect m-b-10" data-toggle="modal" data-target="#myModal">Multi Model</button>
    										/* Modal */
    										<div class="modal fade modal-flex" id="Modal-Multi" tabindex="-1" role="dialog">
    											<div class="modal-dialog" role="document">
    												<div class="modal-content">
    													<div class="modal-header">
    														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    															<span aria-hidden="true">×</span>
    														</button>
    														<h4 class="modal-title" >Modal title</h4>
    													</div>
    													<div class="modal-body text-center">
    														<div><button type="button" class="btn btn-default waves-effect m-t-20 " data-toggle="modal" data-target="#meta-Modal">Click Here!</button></div>
    														<div class="modal fade" id="meta-Modal" tabindex="-1" role="dialog">
    															<div class="modal-dialog modal-sm" role="document">
    																<div class="modal-content">
    																	<div class="modal-header">
    																		<h4 class="modal-title">Modal title</h4>
    																	</div>
    																	<div class="modal-body">
    																		<h5>Small Modal</h5>
    																		<p>Lorem ipsum dolor sit amet, consectetur adipiscing.<p>
    																	</div>
    																	<div class="modal-footer">
    																		<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
    																	</div>
    																</div>
    															</div>
    														</div>
    														<p class="m-t-10">Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing</p>
    													</div>
    													<div class="modal-footer">
    														<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
    														<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
    													</div>
    												</div>
    											</div>
    										</div>

    									/* end of button list */

###### Home

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

###### Profile

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

###### Messages

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

###### Settings

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

##### Some text above the scrollable box

This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

##### Overflow container

Similique velit aut et cumque illum consequatur doloribus quis ipsam sunt sint qui impedit nihil voluptate animi nesciunt corporis aspernatur quaerat sed rem voluptas commodi magnam porro eum sunt quis ullam aut odit laudantium quia soluta corrupti aut qui officiis hic voluptatibus aut itaque voluptates qui expedita minus autem aliquid et debitis omnis provident quia voluptate illo tempora illum maiores perferendis dolorem recusandae ut reprehenderit ad est eum occaecati quam non et quod amet illo id doloremque vitae porro porro sit amet voluptatem quia laboriosam aliquam quia quis facilis eveniet dolorum sunt neque rerum earum ut eaque ab tenetur quia nam quis rerum cumque eos excepturi nostrum qui distinctio porro enim vitae eligendi accusantium quia possimus et autem error repellendus vitae ad quia laborum minima autem nulla optio ad ea nobis animi illo voluptates cum recusandae temporibus voluptate amet quam excepturi odio quia suscipit inventore et rerum quos rerum aut doloribus aut consequatur earum impedit reiciendis saepe voluptates exercitationem maxime culpa saepe ducimus culpa ut aliquam magnam aut veniam sit totam architecto vel distinctio aspernatur aut qui labore quaerat rerum voluptatem sapiente sint sed explicabo et hic laboriosam sit nesciunt et minus et aut dignissimos ut porro incidunt sint et nihil id tempora aut et illum molestiae aperiam minus earum repellendus tempora illo itaque amet facilis quia rem iure quod corrupti dolores et sequi sunt ipsa labore quia unde qui blanditiis ut eos at quia beatae sit repellat quibusdam neque natus expedita sed perspiciatis atque quas voluptatem autem velit enim qui omnis molestiae et repellat sapiente corporis ipsam sed veritatis in quo quod et occaecati quia rerum iusto cumque accusamus numquam sunt quo sequi id molestiae consequatur doloribus molestiae autem nisi nostrum blanditiis et nihil sed nobis incidunt omnis quos minima eius quo accusamus qui ea minus aut est tempora quia inventore ad delectus vel et accusamus fuga eius ipsa aliquam alias sint maxime quae enim atque corrupti libero eos nesciunt et voluptas velit numquam illo non qui quaerat enim omnis et ex asperiores inventore quisquam est enim labore ut nobis consequatur fuga ut quo vel molestiae alias eius quod aspernatur laudantium pariatur eius fuga inventore esse at alias repudiandae perspiciatis id qui fuga consequatur recusandae atque iste commodi sapiente eaque labore ipsa aut sint quo vel recusandae ab iusto ducimus minus voluptas ex et illo commodi ipsa pariatur qui quae adipisci saepe dicta delectus nostrum illum incidunt laboriosam est maxime eum debitis et explicabo quia doloribus quod occaecati tempore tempora labore nihil enim recusandae et dolorum temporibus molestiae sint non porro neque minus provident reprehenderit similique illum voluptate qui dicta dolorum totam quia ut nihil dolore fugiat laboriosam molestiae eveniet omnis consequatur non magni nemo consequatur laboriosam non facilis harum eaque illo pariatur rerum dolores quis autem nemo aut enim tenetur pariatur et non quam repudiandae quia aliquam sunt corporis aperiam natus aut reprehenderit non non illum cum laboriosam nulla quaerat eligendi laudantium perspiciatis.

##### Some text above the scrollable box

This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

#### Modal title

##### Small Modal

Lorem ipsum dolor sit amet, consectetur adipiscing .

Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing

#### Modal 1

Content for the dialog / modal goes here.

more content

Launch modal

#### Modal 2

Content for the dialog / modal goes here.

come content

Launch modal

#### Modal 3

Content for the dialog / modal goes here. Launch modal

#### Modal 4

Content for the dialog / modal goes here.

##### Sweetalert (Dialogs)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Animation Modal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.

### Modal Dialog

This is a modal window. You can do the following things with it:

- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.