You need a function that loads the modal into the DOM, and a function to make it visible.

const myModalDiv = "<!-- all your modal HTML markup goes here -->";
let modalLoaded = false;
function loadMyModal() {
  if (modalLoaded) { return; }
  document.body.appendChild(myModalDiv);
  modalLoaded = true;
}

function showMyModal () {
  if (!modalLoaded) { loadMyModal(); }
  $('#myModal').modal('show');
}

try this

function CreateModal(){
  var html = [
//you can change code to your html
for creating you can use [this site][1]

            '<div class="modal fade" id="myModal" role="dialog">',
            '    <div class="modal-dialog">',
            '        <div class="modal-content" id="Main-Modal">',
            '            <div class="modal-header" style="padding:35px 50px;text-align: center; font-size: 30px;">',
            '                <h4>برای دیدن پروفایل کامل وارد شوید یا ثبت نام کنید</h4>',
            '            </div>',
            '            <div class="modal-body" style="padding:40px 50px;">',
            '                <h3><strong>ورود به شهوانی</strong></h3>',
            '                <br>',
            '                <input type="hidden" name="csrfmiddlewaretoken" value="4gGY6LdmQsOvV6X2U20RnaOZ1v0nwXGI">',
            '                <p>',
            '                    <label for="id_username">نام کاربری:</label>',
            '                    <input id="id_username" maxlength="254" name="username" type="text">',
            '                </p>',
            '                <p>',
            '                    <label for="id_password">گذرواژه:</label>',
            '                    <input id="id_password" name="password" type="password">',
            '                </p>',
            '                <input class="btn btn-lg btn-danger" type="button" onclick="SendToHost()" value="ورود">',
            '                <input type="hidden" name="next" value="">',
            '                <p>پسوردتان را فراموش کرده اید؟ <a href="/accounts/password/reset/">بازنشانی کنید</a></p>',
            '                <p>عضو نیستید؟ <a href="/accounts/register/">ثبت نام کنید</a>!</p>',
            '            </div>',
            '        </div>',
            '    </div>',
            '</div>',


        ].join("n");
        $("body").append(html);
//here you force modal to be open
        $("#myModal").modal({"backdrop": "static"});
}

and on your button

<button onclick='CreateModal()'>LOGIN </button>

You can use document.getElementById('wrapper').innerHTML = "<div>contents</div>";.

This method will be a little annoying, but
here’s a solution: you can write your modal’s HTML code in a separate file, then you make a simple utility in Ruby (for example) to delete all the line breaks from your file.

Here’s an example:

#!/usr/bin/ruby

File.open("htmlfile.html", "r") do |f|
   File.new("output.js", "w")
   File.open("output.js", "w") do |ff|
      contents = f.read()
      contents["n"] = "" # Remove the line breaks
      ff.write(contents)
      ff.close()
   end
f.close()
end

Open the file called “output.js” and you’ll find your “parsed” HTML code!

Now you can insert it into your javascript file.

Here is your code:

$("#_button").click(function() {
   document.getElementById('form_wrapper').innerHTML = '<div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content" style="direction: rtl"><div class="modal-header" style="padding:35px 50px;text-align: center; font-size: 30px;"><h4>برای دیدن پروفایل کامل وارد شوید یا ثبت نام کنید</h4></div><div class="modal-body" style="padding:40px 50px;"><h3><strong>ورود به شهوانی</strong></h3><br><input type="hidden" name="csrfmiddlewaretoken" value="4gGY6LdmQsOvV6X2U20RnaOZ1v0nwXGI"><p><label for="id_username">نام کاربری:</label><input id="id_username" maxlength="254" name="username" type="text"></p><p><label for="id_password">گذرواژه:</label><input id="id_password" name="password" type="password"></p><input class="btn btn-lg btn-danger" type="button" onclick="SendToHost()" value="ورود"><input type="hidden" name="next" value=""><p>پسوردتان را فراموش کرده اید؟ <a href="/accounts/password/reset/">بازنشانی کنید</a></p><p>عضو نیستید؟ <a href="/accounts/register/">ثبت نام کنید</a>!</p></div><div class="modal-footer" style="background-color: #f9f9f9;"><div class="row"><br><div class="col-xs-12 text-center"><ul class="list-unstyled list-inline"><li><a href="/">خانه</a></li><li><a href="/tos">قوانین</a></li><li><a href="/faq">راهنما</a></li><li><a href="/privacy">حریم خصوصی</a></li><li><a href="/contact">تماس</a></li><li><a href="/accounts/login/">ورود</a></li></ul></div></div></div></div></div></div>';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="_button">Click on me!</button>
<div id="form_wrapper">
</div>

i have a modal and i want to show it only with javascript
i have a button

<button onclick='ShowModal'>LOGIN </button>

when i click on button this code will run

$("#myModal").modal();

and i have a modal in html

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

        <!-- Modal content-->
        <div class="modal-content" style="direction: rtl">
            <div class="modal-header" style="padding:35px 50px;text-align: center; font-size: 30px;">
                <h4>برای دیدن پروفایل کامل وارد شوید یا ثبت نام کنید</h4>
            </div>
            <div class="modal-body" style="padding:40px 50px;">
                <h3><strong>ورود به شهوانی</strong></h3>
                <br>
                <input type="hidden" name="csrfmiddlewaretoken" value="4gGY6LdmQsOvV6X2U20RnaOZ1v0nwXGI">
                <p>
                    <label for="id_username">نام کاربری:</label>
                    <input id="id_username" maxlength="254" name="username" type="text">
                </p>
                <p>
                    <label for="id_password">گذرواژه:</label>
                    <input id="id_password" name="password" type="password">
                </p>
                <input class="btn btn-lg btn-danger" type="button" onclick="SendToHost()" value="ورود">
                <input type="hidden" name="next" value="">

                <p>پسوردتان را فراموش کرده اید؟ <a href="/accounts/password/reset/">بازنشانی کنید</a></p>
                <p>عضو نیستید؟ <a href="/accounts/register/">ثبت نام کنید</a>!</p>

            </div>
            <div class="modal-footer" style="background-color: #f9f9f9;">
                <div class="row">
                    <br>
                    <div class="col-xs-12 text-center">
                        <ul class="list-unstyled list-inline">
                            <li><a href="/">خانه</a></li>
                            <li><a href="/tos">قوانین</a></li>
                            <li><a href="/faq">راهنما</a></li>
                            <li><a href="/privacy">حریم خصوصی</a></li>
                            <li><a href="/contact">تماس</a></li>
                            <li><a href="/accounts/login/">ورود</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

but i want to generate in javascript and dident use it in page
i mean when i click on button java script generate modal and show it not show a ready html modal