简体   繁体   中英

how to contribute body of modal in bootstrap 3?

The requirement-My applicaiton has a button which when clicked a modal is supposed to pop-up where there will contain some data.
Architecture-I want the modal data to be contributed from some another application(some url),through a php file.How can this be done?
What I have tried-In the php file i have placed

<?php echo ' <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="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">...</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>

In the html I am using this

<div id="prerequisites-container" class="container-fluid">
    <a href="http://localhost/Experiment/main/prereq.php"
        data-toggle="modal" data-target="#myModal" class="btn btn-default">
        Launch Modal </a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>

Place your HTML code, as follows:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true"></div>

inside your Echo.

<?php echo ' HERE <div class="modal-dialog">

UPDATED:

<div id="prerequisites-container" class="container-fluid">
    <a href="#" data-toggle="modal" data-target="#trymodalbootstrap" role="button" data-toggle="modal" class="btn btn-default">Launch Modal</a>
</div>

<?php echo '<div class="modal fade" id="trymodalbootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<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="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">...</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>'; ?>

place the modal html in your html, and fetch modal content data dynamically through ajax call from server. and add that data to modal before displaying

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM