Bootstrap Modal Window Inside Another Div

Bootstrap modal window inside another div

Here's an example I just did using your code and doing little tweaks to it.

Click here and watch it working

How to solve it:

$(function () {

  

  //getting click event to show modal

    $('#submit-button').click(function () {

        $('#dialog_confirm_map').modal();

      

      //appending modal background inside the bigform-content

        $('.modal-backdrop').appendTo('.bigform-content');

      //removing body classes to enable click events

        $('body').removeClass();

    });

  

  //just to prove actions outside modal

    $('#help-button').click(function () {

        alert("Action with modal opened or closed");

    });

  //end just to prove actions outside modal

});
.bigform-content {

    border: solid 5px #DDD;

    margin: 30px 20px;

    overflow: hidden;

    padding:20px;

    position:relative;

}

.modal, .modal-backdrop {

    position: absolute !important;

}

.bigform-content h1 {

    margin:0;

}

.bigform-content input[type=submit] {

    margin-top:10px;

}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="bigform-content">

    <div class="wpcol-one col-md-6">

         <h1>Hi, this is my form title</h1>

    </div>

    <div class="wpcol-one col-md-6">

        <p>This is my form</p>

        <label for="field-one">Field 1:</label>

        <input id="field-one" class="form-control" type="text" />

        <label for="field-two">Field 2:</label>

        <input id="field-two" class="form-control" type="text" />

        <label for="field-three">Field 1:</label>

        <input id="field-three" class="form-control" type="text" />

        <input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />

    </div>

    <!-- Modal -->

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

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-body">

                    <p>You didn't move the map pin, are you sure it is on your address/house?</p>

                </div>

                <div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>

 <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>

                </div>

            </div>

            <!-- /.modal-content -->

        </div>

        <!-- /.modal-dialog -->

    </div>

    <!-- /.modal -->

</div>

<p>Content outside div and modal</p>

<p>Hope it

    <input id="help-button" type="button" value="helps" class="btn btn-success" />

</p>

Bootstrap: Open Another Modal in Modal

data-dismiss makes the current modal window force close

data-toggle opens up a new modal with the href content inside it

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

or

<a data-dismiss="modal" onclick="call the new div here">Click</a>

do let us know if it works.

  • You might also want to take a look around the Modal Documentation

Getting Bootstrap's modal content from another page

Update

The way you're trying to get modal's content from another page is incorrect.

According to Bootstrap's documentation:

If a remote URL is provided, content will be loaded one time via
jQuery's load method and injected into the .modal-content div. If
you're using the data-api, you may alternatively use the href
attribute to specify the remote source. An example of this is shown
below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

So, firstly, you should change your menu.html file to be similar to the code above:

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

And then, part of your Lab6.html page must reside inside your menu.html page. E.g:

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

Finally, your LAB6.html would have only the code that was inside .modal-content. E.g:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

Take a look at the plnkr I created for you.

bootstrap modal inside a modal

You might wanna try the Bootstrap Modal plugin (Demo here - Stackable, Source here)

<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Stack One</h4>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <p>One fine body…</p>
    <p>One fine body…</p>
    <input class="form-control" type="text" data-tabindex="1">
    <input class="form-control" type="text" data-tabindex="2">
    <button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
    <button type="button" class="btn btn-primary">Ok</button>
  </div>
</div>

<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Stack Two</h4>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <p>One fine body…</p>
    <input class="form-control" type="text" data-tabindex="1">
    <input class="form-control" type="text" data-tabindex="2">
    <button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
    <button type="button" class="btn btn-primary">Ok</button>
  </div>
</div>

<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Stack Three</h4>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <input class="form-control" type="text" data-tabindex="1">
    <input class="form-control" type="text" data-tabindex="2">
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
    <button type="button" class="btn btn-primary">Ok</button>
  </div>
</div>

Don't forget to add both .js file from the src folder.


Related Topics

Apply Background-Size to Individual Layer of a Multiple Background

How to Properly Use CSS-Values Viewport-Relative-Lengths

Drawing Rounded Triangle with CSS

How to Apply CSS to HTML5 Custom Elements

For Div to Extend Full Height

Add a Text Suffix to <Input Type="Number">

How to Make Div Background Color Transparent in CSS

CSS Pseudo-Element to Apply the First Character of an Element

How to Make a Curve on a Rectangle's Top in CSS? Only in Top Edge

Limit the Width of a Column to the Width of a Particular Grid Item

Use Calc() Function in Makestyles

Continuously Adjust Element Size as Screen Size Changes

How to Override a Less Mixin Variable Based on a Parent's Variable

Border-Image: Workaround for Ie

How to Style an Anchor Tag to Look Like a Button with the Same Height as the Button

Attribute Selector Where Value Equals Either a or B

Handling CSS Id and Classes with Spaces

Is There an Advanced CSS Minifier/Compiler That Does Things Like Strip Redundancy and Comma Separate Identical Rules


Leave a reply



Submit