создать модал с javascript - PullRequest
Новая
       5

создать модал с javascript

0 голосов
/ 20 апреля 2020

У меня есть модал, и я хочу показать его только с javascript У меня есть кнопка 

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

, когда я нажимаю на кнопку, этот код будет запускаться 

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

и У меня есть модальный в 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>

, но я хочу создать в javascript и использовать его на странице, я имею в виду, когда я нажимаю на кнопку java скрипт генерирует модальный и показывает, что он не отображается готовый html модал

Ответы [ 4 ]

2 голосов
/ 20 апреля 2020

Вам нужна функция, которая загружает модал в DOM, и - функция, которая делает его видимым. 

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');
}
1 голос
/ 20 апреля 2020 

// Create a new element in dom
var myModelHtml= $('#myModel').html();
$(document.body).append(myModelHtml);

// trigger Click model
$(myModelHtml).modal('show');

//  Remove model
$('div#myModal').modal("hide");
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <template id=myModel>
        <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>
    </template>
    
</body>
</html>
1 голос
/ 20 апреля 2020

Вы можете использовать document.getElementById('wrapper').innerHTML = "<div>contents</div>";.

Этот метод будет немного раздражать, но вот решение: вы можете написать код вашего модального HTML в отдельном файле, а затем сделать простую утилиту в Ruby (например), чтобы удалить все разрывы строк из вашего файла.

Вот пример: 

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

Откройте файл с именем "output. js" и вы найдете ваш "разобранный" HTML код!

Теперь вы можете вставить его в файл javascript.

Вот ваш код: 

$("#_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>
1 голос
/ 20 апреля 2020

попробуйте 



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"});
}

и нажмите на кнопку 

<button onclick='CreateModal()'>LOGIN </button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...