javascript - 将 html 嵌入到 javascript 文件中

Question

这是关闭和打开 moda 的脚本。当我点击触发事件时会调用它。我想要一些 html 以便将其呈现在屏幕上。

<!-- 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>

我想在js文件中包含一段html和css。我不确定具体该怎么做。

<!-- 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>

Answer 1

使用 jQuery 并通过使用 ID 选择器选择它来获取 html:

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>

您可以使用包含 HTML 的变量 html_content。您可以在模态中使用此变量。