Embed html into javascript file

Question

This is the script for closing and opening the moda. It is called when I trigger the event on click. And I want to have some html in order to render that on the screen.

<!-- Script for calling the modal -->
<script>
    $("body").delegate(".share.dash-button__feed", "click", function () {

        var thisID = $(this).attr('data-thdkls');
        $.post("/nodelike/nodelikes/dash_share/", {
                data: {
                    postid: thisID,
                }
            },
                /* The functionality when the "share" button is clicked */
            function () {
                //Load the modal
                var modal = document.getElementById('share-post');
                //Load the closing button
                var span = document.getElementsByClassName("close")[0];
                //Hide the modal if the "X" button is clicked
                span.onclick = function () {
                    modal.style.display = "none";
                }
                //Load and close the modal
                if (modal.style.display === 'none') {
                    modal.style.display = 'block';
                } else {
                    modal.style.display = 'none';
                }
                //Close the modal if you click outside the modal
                window.onclick = function (event) {
                    if (event.target == modal) {
                        modal.style.display = "none";
                    }
                }

            }
        );
    });
</script>

I want to include a pice of html and css into a js file. I am not sure exactly how to do it.

<!-- The HTML Modal for sharing a post by a user -->
<div id="share-post" class="modal" style="display: none;">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some random text....</p>
    </div>
</div>

what do you want to do with it inside your JS file?

Rotan075
– Rotan075

2017-05-10 11:15:37 +00:00
Commented May 10, 2017 at 11:15 — Rotan075
– Rotan075, Commented May 10, 2017 at 11:15
Dom css and CreateElement

prasanth
– prasanth

2017-05-10 11:16:09 +00:00
Commented May 10, 2017 at 11:16 — prasanth
– prasanth, Commented May 10, 2017 at 11:16
I want to create a modal from it, when I click a button.

Rareș Urs
– Rareș Urs

2017-05-10 11:16:41 +00:00
Commented May 10, 2017 at 11:16 — Rareș Urs
– Rareș Urs, Commented May 10, 2017 at 11:16

Rotan075 · Accepted Answer · 2017-05-10 11:22:12Z

1

Use jQuery and get the html by selecting it through using and ID selector:

var html_content = $('#share-post')[0];
console.log(html_content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="share-post" class="modal" style="display: none;">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some random text....</p>
    </div>
</div>

you can use the variable html_content which contains the HTML. You can use this variable within your modal.

answered May 10, 2017 at 11:22

Rotan075

2,6155 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rotan075 Over a year ago

glad to help! @RareșUrs

Collectives™ on Stack Overflow

Embed html into javascript file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related