Simple Bootstrap Modal with Dynamic content Using remote URL

Model is very important UI for any website, normally every website use modal box to show message,add/edit data etc, here we will learn how to create popup box based on URL.The url can be separate file or mvc based url.We will use window manager class to create model box.The open method takes class name,window id and content url as parameters.

Since remote_url option has been deprecated on bootstrap v3.3.0 and will be removed in v4, so we have used or calling jQuery.load method to load content in modal window.

The main benefit of jQuery's load method is the modal content will be dynamic instead of static or loaded one time like remote URL.

Yo can also Checkout other Modal Box tutorial,

We have used following file to create modal popup using bootstrap

  1. index.php : This file will be used to define all library files and load content.
  2. modalbox.php : This file will participate to create modal layout.

Steps to Create Bootstrap Modal Using jQuery load() method

Step 1: We have included all bootstrap and jquery files in index.php file.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Bootstrap Modal with Dynamic content Using remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container ">
<div class="jumbotron"><a class="btn btn-primary pull-right" data-toggle="modal" href="#myModal" id="modellink">Show Modal</a></div>
<div class="modal-container"></div>
</div>
</body>
</html>

In above code we have created a link which is used to show bootstrap modal window.

Step 2: We have created modal window file modalbox.php.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">Recipient:</label>
                    <input type="text" class="form-control" id="recipient-name">
                  </div>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Message:</label>
                    <textarea class="form-control" id="message-text"></textarea>
                  </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Step 3: So now we will call jquery load() method using target modal URL file path and show modal popup.

Select Code
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    $(document).ready(function(){
        var url = "modalbox.php";
        jQuery('#modellink').click(function(e) {
            $('.modal-container').load(url,function(result){
                $('#myModal').modal({show:true});
            });
        });
    });
</script>

Simple Demo and Example of Bootstrap Modal With Url

simplemodal-box

  • mbunal

    hello. i cant reopen closed modal. is there any solution? please check your example.
    1. open modal.
    2. then close.
    3. open modal again.
    4. close again.
    5. open modal if u can
    6. if opened close modal if you can.

    this is my big problem.

  • mbunal

    i just found a solution. if you add following code to js, you can open and close as you like…

    $(document).on(“hidden.bs.modal”, “#myModal”, function () {
    $(‘#myModal’).remove(); // Remove from DOM.
    });

    i just add above the “” tag.

  • Maurice Hoeneveld

    Is there an option to give the URL as a variable so the script can be used for different buttons opening the same modal but with different content?
    Thanks a lot in advance