Modal

Use Bootstrap’s modal plugin with our custom styles to add dialogs to your site for notifications or completely custom content.

Cookie

Cookie 
<a href="#" class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 mb-2 md:mb-0" data-bs-toggle="modal" data-bs-target="#modal-01">Cookie</a>
  
<div class="modal fade modal-bottom-center" id="modal-01" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-body p-6">
        <div class="row">
          <div class="md:w-full flex-[0_0_auto] px-[15px] max-w-full lg:w-8/12 flex-[0_0_auto] px-[15px] max-w-full mb-4 lg:!mb-0 my-auto items-center">
            <h4 class="mb-2">Cookie Policy</h4>
            <p class="mb-0">We use cookies to personalize content to make our site easier for you to use.</p>
          </div>
          <!--/column -->
          <div class="md:w-5/12 flex-[0_0_auto] px-[15px] max-w-full lg:w-4/12 flex-[0_0_auto] px-[15px] max-w-full  xl:!text-right lg:!text-right my-auto">
            <a href="#" class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-dismiss="modal" aria-label="Close">I Understand</a>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/.modal-body -->
    </div>
    <!--/.modal-content -->
  </div>
  <!--/.modal-dialog -->
</div>
<!--/.modal -->

Subscription

Subscription 
<a href="#" class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 mb-2 md:mb-0" data-bs-toggle="modal" data-bs-target="#modal-02">Subscription</a>
  
<div class="modal fade" id="modal-02" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content !text-center">
      <div class="modal-body">
        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="row">
          <div class="md:w-10/12 flex-[0_0_auto] px-[15px] max-w-full md:!ml-[8.33333333%]">
            <figure class="mb-6"><img src="../../assets/img/illustrations/i7.png" srcset="../../assets/img/illustrations/i7@2x.png 2x" alt="" /></figure>
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
        <h3>Join the mailing list and get %10 off</h3>
        <p class="mb-6">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <div class="newsletter-wrapper">
          <div class="row">
            <div class="md:w-10/12 flex-[0_0_auto] px-[15px] max-w-full md:!ml-[8.33333333%]">
              <!-- Begin Mailchimp Signup Form -->
              <div id="mc_embed_signup">
                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                  <div id="mc_embed_signup_scroll">
                    <div class="!text-left input-group !relative">
                      <input type="email" value="" name="EMAIL" class="required email form-control" placeholder="Email Address" id="mce-EMAIL">
                      <label for="mce-EMAIL">Email Address</label>
                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
                    </div>
                    <div id="mce-responses" class="clear">
                      <div class="response" id="mce-error-response" style="display:none"></div>
                      <div class="response" id="mce-success-response" style="display:none"></div>
                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
                    <div class="clear"></div>
                  </div>
                </form>
              </div>
              <!--End mc_embed_signup-->
            </div>
            <!-- /.newsletter-wrapper -->
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!--/.modal-body -->
    </div>
    <!--/.modal-content -->
  </div>
  <!--/.modal-dialog -->
</div>
<!--/.modal -->

Sign In

Sign In 
<a href="#" class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 mb-2 md:mb-0" data-bs-toggle="modal" data-bs-target="#modal-signin">Sign In</a>

<div class="modal fade" id="modal-signin" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content !text-center">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <h2 class="mb-3 text-left">Welcome Back</h2>
        <p class="lead !mb-6 text-left">Fill your email and password to sign in.</p>
        <form class="text-left mb-3">
          <div class="relative mb-4">
            <input type="email" class="form-control" placeholder="Email" id="loginEmail">
            <label for="loginEmail">Email</label>
          </div>
          <div class="relative password-field mb-4">
            <input type="password" class="form-control" placeholder="Password" id="loginPassword">
            <span class="password-toggle"><i class="uil uil-eye"></i></span>
            <label for="loginPassword">Password</label>
          </div>
          <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full mb-2">Sign In</a>
        </form>
        <!-- /form -->
        <p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
        <p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
        <div class="divider-icon !my-4">or</div>
        <nav class="nav social justify-center !text-center">
          <a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
          <a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
          <a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
        </nav>
        <!--/.social -->
      </div>
      <!--/.modal-content -->
    </div>
    <!--/.modal-body -->
  </div>
  <!--/.modal-dialog -->
</div>
<!--/.modal -->

Sign Up

Sign Up 
<a href="#" class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 mb-2 md:mb-0" data-bs-toggle="modal" data-bs-target="#modal-signup">Sign Up</a>
  
<div class="modal fade" id="modal-signup" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content !text-center">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <h2 class="mb-3 text-left">Sign up to Sandbox</h2>
        <p class="lead !mb-6 text-left">Registration takes less than a minute.</p>
        <form class="text-left mb-3">
          <div class="relative mb-4">
            <input type="text" class="form-control" placeholder="Name" id="loginName">
            <label for="loginName">Name</label>
          </div>
          <div class="relative mb-4">
            <input type="email" class="form-control" placeholder="Email" id="loginEmail">
            <label for="loginEmail">Email</label>
          </div>
          <div class="relative password-field mb-4">
            <input type="password" class="form-control" placeholder="Password" id="loginPassword">
            <span class="password-toggle"><i class="uil uil-eye"></i></span>
            <label for="loginPassword">Password</label>
          </div>
          <div class="relative password-field mb-4">
            <input type="password" class="form-control" placeholder="Confirm Password" id="loginPasswordConfirm">
            <span class="password-toggle"><i class="uil uil-eye"></i></span>
            <label for="loginPasswordConfirm">Confirm Password</label>
          </div>
          <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full mb-2">Sign Up</a>
        </form>
        <!-- /form -->
        <p class="mb-0">Already have an account? <a href="#" data-bs-target="#modal-signin" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign in</a></p>
        <div class="divider-icon !my-4">or</div>
        <nav class="nav social justify-center !text-center">
          <a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
          <a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
          <a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
        </nav>
        <!--/.social -->
      </div>
      <!--/.modal-content -->
    </div>
    <!--/.modal-body -->
  </div>
  <!--/.modal-dialog -->
</div>
<!--/.modal -->

Popup

To display any modal as a popup on your page, add .modal-popup class to your .modal.

Check out a live example: Demo 12.

<div class="modal fade modal-popup" id="modal-01" tabindex="-1">
  ...
</div>
<!--/.modal -->

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image