CODEWITHSUNDEEP
jquerytwitter-bootstrap
Kupigon
Kupigon

Reputation: 307

Use modal with external URL body and dynamic links from data attribute

I'm trying to make a Bootstrap modal work with external link.

This is what I've done until now, but there's some syntax error I think:

<html>
    <head>
        <link type="text/css "rel="stylesheet" href="/assets/css/bootstrap.min.css" />
    </head>
    <body>
        <a href="#popUp" id="popUp" data-href="/test1.php">1</a>
        <a href="#popUp" id="popUp" data-href="/test2.php">2</a>
        <div class="modal fade" id="popUpModal" tabindex="-1" role="dialog" aria-labelledby="popUpModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="popUpModalLabel">PopUp</h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/assets/js/jquery.1.10.2.min.js"></script>
        <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#popUp').click(function() {
                    $('#popUpModal .modal-body').load(('#popUp').data('href'), function(e) {
                        $('#popUpModal').modal('show')
                    })
                })
            }
        </script>
    </body>
</html>

Basically, the idea is to open /test1.php as a modal (popUpModal) if I click on 1 and /test2.php if I click on 2.

Upvotes: 2

Views: 9532

Answers (2)

vaso123
vaso123

Reputation: 12391

You have a missing ) at the end of your script, what should close the .ready( ID's should be unique in HTML, and you have 2 div with same ID popUp.

Change your popup links id to class and use $(this).data('href') where you load:

<a href="#popUp" class="popUp" data-href="/test1.php">1</a>
<a href="#popUp" class="popUp" data-href="/test2.php">2</a>

And the script:

$(document).ready(function() {
    $('.popUp').click(function() {
        $('#popUpModal .modal-body').load($(this).data('href'), function(e) {
            $('#popUpModal').modal('show')
        });
    });
});

Upvotes: 2

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

In v3.1 the above behavior was changed and now the remote content is loaded into .modal-content 

<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Click me !</a>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <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">Modal title</h4>

                </div>
                <div class="modal-body"><div class="te"></div></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 changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

Fiddle http://jsfiddle.net/koala_dev/NUCgp/918/

Upvotes: 0

Related Questions