How to dynamically append a bootstrap modal to a body using javascript












1















I have a bootstrap model like below, I want to insert this modal to every html page by calling a javascript function addModal(); and it should append the modal to the body tag
how to do it






<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>












share|improve this question























  • do you want to add the modal when the page is loading?

    – Matt.S
    Nov 20 '18 at 12:46











  • yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

    – Electronics World
    Nov 20 '18 at 12:54











  • and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

    – Matt.S
    Nov 20 '18 at 13:00











  • no actuly i want that modal to come from js file. and it is html pages not php

    – Electronics World
    Nov 20 '18 at 13:18
















1















I have a bootstrap model like below, I want to insert this modal to every html page by calling a javascript function addModal(); and it should append the modal to the body tag
how to do it






<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>












share|improve this question























  • do you want to add the modal when the page is loading?

    – Matt.S
    Nov 20 '18 at 12:46











  • yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

    – Electronics World
    Nov 20 '18 at 12:54











  • and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

    – Matt.S
    Nov 20 '18 at 13:00











  • no actuly i want that modal to come from js file. and it is html pages not php

    – Electronics World
    Nov 20 '18 at 13:18














1












1








1








I have a bootstrap model like below, I want to insert this modal to every html page by calling a javascript function addModal(); and it should append the modal to the body tag
how to do it






<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>












share|improve this question














I have a bootstrap model like below, I want to insert this modal to every html page by calling a javascript function addModal(); and it should append the modal to the body tag
how to do it






<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>








<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>





<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>






html bootstrap-modal






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 20 '18 at 12:35









Electronics WorldElectronics World

205




205













  • do you want to add the modal when the page is loading?

    – Matt.S
    Nov 20 '18 at 12:46











  • yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

    – Electronics World
    Nov 20 '18 at 12:54











  • and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

    – Matt.S
    Nov 20 '18 at 13:00











  • no actuly i want that modal to come from js file. and it is html pages not php

    – Electronics World
    Nov 20 '18 at 13:18



















  • do you want to add the modal when the page is loading?

    – Matt.S
    Nov 20 '18 at 12:46











  • yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

    – Electronics World
    Nov 20 '18 at 12:54











  • and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

    – Matt.S
    Nov 20 '18 at 13:00











  • no actuly i want that modal to come from js file. and it is html pages not php

    – Electronics World
    Nov 20 '18 at 13:18

















do you want to add the modal when the page is loading?

– Matt.S
Nov 20 '18 at 12:46





do you want to add the modal when the page is loading?

– Matt.S
Nov 20 '18 at 12:46













yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

– Electronics World
Nov 20 '18 at 12:54





yes, but it should come from javascript using function call, so that i will add the js file to every page and call the function and it will append the modal to that page

– Electronics World
Nov 20 '18 at 12:54













and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

– Matt.S
Nov 20 '18 at 13:00





and your file is html not php right? If it was php you wouldn't even need a function: <?php require_once "your_modal.html"; ?>

– Matt.S
Nov 20 '18 at 13:00













no actuly i want that modal to come from js file. and it is html pages not php

– Electronics World
Nov 20 '18 at 13:18





no actuly i want that modal to come from js file. and it is html pages not php

– Electronics World
Nov 20 '18 at 13:18












2 Answers
2






active

oldest

votes


















1














Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)



function addModal() {
$("body").append('<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>');
}





share|improve this answer































    0














    An easy way of doing this is using jquery:



    <script>
    $(document).ready(function() {
    $("#ModalDiv").load("yourModal.html");
    });
    </script>


    HTML:



    <body>

    //your code

    <div id="ModalDiv"></div>

    //your code

    </body>





    share|improve this answer
























    • i'm not having your-modal.htm i want to add that modal from js file

      – Electronics World
      Nov 20 '18 at 13:20











    • i want to append that modal div to body tag

      – Electronics World
      Nov 20 '18 at 13:20











    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393129%2fhow-to-dynamically-append-a-bootstrap-modal-to-a-body-using-javascript%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)



    function addModal() {
    $("body").append('<!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
    <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>');
    }





    share|improve this answer




























      1














      Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)



      function addModal() {
      $("body").append('<!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div>
      </div>
      </div>');
      }





      share|improve this answer


























        1












        1








        1







        Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)



        function addModal() {
        $("body").append('<!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
        <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
        </div>');
        }





        share|improve this answer













        Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)



        function addModal() {
        $("body").append('<!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
        <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
        </div>');
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 20 '18 at 13:55









        Matt.SMatt.S

        213117




        213117

























            0














            An easy way of doing this is using jquery:



            <script>
            $(document).ready(function() {
            $("#ModalDiv").load("yourModal.html");
            });
            </script>


            HTML:



            <body>

            //your code

            <div id="ModalDiv"></div>

            //your code

            </body>





            share|improve this answer
























            • i'm not having your-modal.htm i want to add that modal from js file

              – Electronics World
              Nov 20 '18 at 13:20











            • i want to append that modal div to body tag

              – Electronics World
              Nov 20 '18 at 13:20
















            0














            An easy way of doing this is using jquery:



            <script>
            $(document).ready(function() {
            $("#ModalDiv").load("yourModal.html");
            });
            </script>


            HTML:



            <body>

            //your code

            <div id="ModalDiv"></div>

            //your code

            </body>





            share|improve this answer
























            • i'm not having your-modal.htm i want to add that modal from js file

              – Electronics World
              Nov 20 '18 at 13:20











            • i want to append that modal div to body tag

              – Electronics World
              Nov 20 '18 at 13:20














            0












            0








            0







            An easy way of doing this is using jquery:



            <script>
            $(document).ready(function() {
            $("#ModalDiv").load("yourModal.html");
            });
            </script>


            HTML:



            <body>

            //your code

            <div id="ModalDiv"></div>

            //your code

            </body>





            share|improve this answer













            An easy way of doing this is using jquery:



            <script>
            $(document).ready(function() {
            $("#ModalDiv").load("yourModal.html");
            });
            </script>


            HTML:



            <body>

            //your code

            <div id="ModalDiv"></div>

            //your code

            </body>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 20 '18 at 13:11









            Matt.SMatt.S

            213117




            213117













            • i'm not having your-modal.htm i want to add that modal from js file

              – Electronics World
              Nov 20 '18 at 13:20











            • i want to append that modal div to body tag

              – Electronics World
              Nov 20 '18 at 13:20



















            • i'm not having your-modal.htm i want to add that modal from js file

              – Electronics World
              Nov 20 '18 at 13:20











            • i want to append that modal div to body tag

              – Electronics World
              Nov 20 '18 at 13:20

















            i'm not having your-modal.htm i want to add that modal from js file

            – Electronics World
            Nov 20 '18 at 13:20





            i'm not having your-modal.htm i want to add that modal from js file

            – Electronics World
            Nov 20 '18 at 13:20













            i want to append that modal div to body tag

            – Electronics World
            Nov 20 '18 at 13:20





            i want to append that modal div to body tag

            – Electronics World
            Nov 20 '18 at 13:20


















            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393129%2fhow-to-dynamically-append-a-bootstrap-modal-to-a-body-using-javascript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)