modal with in modal

Comment

-1

Tip Lovely Leopard 1 GREPCC

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>



<a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal 1</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <p>
                    Content 1.
                </p>
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

</div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">modal 2</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    <p>
                    modal 2
                    </p>
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
       <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a>
                </div>
            </div>
        </div>
    </div>

<div class="modal" id="myModal3">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal 3</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <p>
                    modal 3
                </p>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>
 
 
   $('.modal').on('shown.bs.modal', function (e) {
        $('.modal.show').each(function (index) {
            $(this).css('z-index', 1101 + index*2);
        });
        $('.modal-backdrop').each(function (index) {
            $(this).css('z-index', 1101 + index*2-1);
        });
    });

xxxxxxxxxx

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>

<a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal1">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title">Modal 1</h4>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            </div>

            <div class="container"></div>

            <div class="modal-body">

<p>

                    Content 1.

                </p>

                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>

            </div>

            <div class="modal-footer">

                <a href="#" data-dismiss="modal" class="btn">Close</a>

            </div>

        </div>

    </div>

</div>

    <div class="modal" id="myModal2">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h4 class="modal-title">modal 2</h4>

                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                </div>

                <div class="container"></div>

                <div class="modal-body">

<p>

                    modal 2

                    </p>

                </div>

                <div class="modal-footer">

                    <a href="#" data-dismiss="modal" class="btn">Close</a>

                    <a href="#" class="btn btn-primary">Save changes</a>

       <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a>

                </div>

            </div>

        </div>

    </div>

<div class="modal" id="myModal3">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title">Modal 3</h4>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            </div>

            <div class="container"></div>

            <div class="modal-body">

<p>

                    modal 3

                </p>

            </div>

            <div class="modal-footer">

                <a href="#" data-dismiss="modal" class="btn">Close</a>

            </div>

        </div>

    </div>

   $('.modal').on('shown.bs.modal', function (e) {

        $('.modal.show').each(function (index) {

            $(this).css('z-index', 1101 + index*2);

});

        $('.modal-backdrop').each(function (index) {

            $(this).css('z-index', 1101 + index*2-1);

});

});

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Share

Link to this answer
Share Copy Link

Contributed on Dec 12 2021

Lovely Leopard

0 Answers Avg Quality 2/10

modal

Comment

0

Tip Plain Pintail 1 GREPCC

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

xxxxxxxxxx

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">×</span>

        </button>

      </div>

      <div class="modal-body">

...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

Popularity 10/10 Helpfulness 4/10 Language html

Source: getbootstrap.com

Tags: html

Share

Link to this answer
Share Copy Link

Contributed on Jun 14 2020

Plain Pintail

0 Answers Avg Quality 2/10

how to create modal

Comment

0

Tip Hussein asadi 1 GREPCC

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}

/* Add a color to the cancel button */
.cancelbtn {
  background-color: #ccc;
  color: black;
}

/* Add a color to the delete button */
.deletebtn {
  background-color: #f44336;
}

/* Add padding and center-align text to the container */
.container {
  padding: 16px;
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Modal Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
     width: 100%;
  }
}
</style>
<body>

<h2>Delete Modal</h2>

<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>

<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Delete Account</h1>
      <p>Are you sure you want to delete your account?</p>
    
      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button>
      </div>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

xxxxxxxxxx

<!DOCTYPE html>

<html>

<style>

body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box;}

button {

  background-color: #04AA6D;

  color: white;

  padding: 14px 20px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  width: 100%;

  opacity: 0.9;

button:hover {

  opacity:1;

.cancelbtn, .deletebtn {

  float: left;

  width: 50%;

/* Add a color to the cancel button */

.cancelbtn {

  background-color: #ccc;

  color: black;

/* Add a color to the delete button */

.deletebtn {

  background-color: #f44336;

/* Add padding and center-align text to the container */

.container {

  padding: 16px;

  text-align: center;

/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: #474e5d;

  padding-top: 50px;

/* Modal Content/Box */

.modal-content {

  background-color: #fefefe;

  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */

  border: 1px solid #888;

  width: 80%; /* Could be more or less, depending on screen size */

/* Style the horizontal ruler */

hr {

  border: 1px solid #f1f1f1;

  margin-bottom: 25px;

/* The Modal Close Button (x) */

.close {

  position: absolute;

  right: 35px;

  top: 15px;

  font-size: 40px;

  font-weight: bold;

  color: #f1f1f1;

.close:hover,

.close:focus {

  color: #f44336;

  cursor: pointer;

/* Clear floats */

.clearfix::after {

  content: "";

  clear: both;

  display: table;

/* Change styles for cancel button and delete button on extra small screens */

@media screen and (max-width: 300px) {

  .cancelbtn, .deletebtn {

     width: 100%;

</style>

<body>

<h2>Delete Modal</h2>

<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>

<div id="id01" class="modal">

  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>

  <form class="modal-content" action="/action_page.php">

    <div class="container">

      <h1>Delete Account</h1>

      <p>Are you sure you want to delete your account?</p>

      <div class="clearfix">

        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>

        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button>

      </div>

    </div>

  </form>

</div>

<script>

// Get the modal

var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

</script>

</body>

</html>

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: css

Share

Link to this answer
Share Copy Link

Contributed on May 28 2022

hussein asadi

0 Answers Avg Quality 2/10

modal

Comment

0

Tip 1 GREPCC

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

xxxxxxxxxx

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Share

Link to this answer
Share Copy Link

Contributed on Dec 28 2021

0 Answers Avg Quality 2/10

modal

Comment

0

Tip Mary Oseafiana 1 GREPCC

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header w-100">
        <h1 class="modal-title fs-5 text-center" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

xxxxxxxxxx

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header w-100">

        <h1 class="modal-title fs-5 text-center" id="exampleModalLabel">Modal title</h1>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: getbootstrap.com

Tags: whatever whateve

Share

Link to this answer
Share Copy Link

Contributed on Jan 05 2023

Mary Oseafiana

0 Answers Avg Quality 2/10

modal with in modal

Contents

More Related Answers