CODEWITHSUNDEEP
javascripthtmljquery
hosein
hosein

Reputation: 97

generate modal with javascript

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

Upvotes: 1

Views: 2442

Answers (5)

Abednego Nasila
Abednego Nasila

Reputation: 165

Hi here is another workaround.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

#adddiv {
display: none; 
text-align: center;
width: 80%; /*border-radius: 25px;*/ 
border: 2px solid Black; 
padding: 15px 15px 15px 15px; 
margin: 20px 20px 20px 20px; 
//background: #fff//#A4D3EE; 
overflow: visible; 
box-shadow: 5px 5px 2px #888888; 
position: relative; } 
#xadd { position: absolute; 
background: yellow; 
color: black; top: -10px; 
right: -10px; }
#add { position: absolute; 
background: #3caea3;//#3c99dc; 
color: white; }

#deldiv {
display: none;
text-align: center;
width: 80%; /*border-radius: 25px;*/ 
border: 2px solid Black; 
padding: 15px 15px 15px 15px; 
margin: 20px 20px 20px 20px; 
//background: #fff//#A4D3EE; 
overflow: visible; 
box-shadow: 5px 5px 2px #888888; 
position: relative; }
#xdel { position: absolute; 
background: blue; 
color: white; top: -10px; 
right: -10px; }
#del { position: absolute; 
background: red;//#3c99dc; 
color: white; }
</style>
<script>
function myFunctionaddopen() {
var x = document.getElementById("adddiv");
if (x.style.display !== "none") {
  x.style.display = "block";
} else {
    x.style.display = "block";
      }
    }
    </script>
<script>
function myFunctionaddclose() {
var x = document.getElementById("adddiv");
if (x.style.display === "none") {
  //x.style.display = "block";
} else {
x.style.display = "none";
  }
}
</script>

<script>
function myFunctiondelopen() {
var x = document.getElementById("deldiv");
if (x.style.display !== "none") {
  x.style.display = "block";
} else {
    x.style.display = "block";
      }
    }
    </script>
<script>
function myFunctiondelclose() {
var x = document.getElementById("deldiv");
if (x.style.display === "none") {
  //x.style.display = "block";
} else {
x.style.display = "none";
  }
}
</script>
</head>
<body>

<p>Click the action buttons below to open the modals:</p>

<button id="add" onclick="myFunctionaddopen()">button_1</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<button id="del" onclick="myFunctiondelopen()">button_2</button>

<div id="adddiv">
This is the first modal Exit by clicking on the "x" button at the top right coner.
<button id="xadd" onclick="myFunctionaddclose()">x</button>
</div>

<div id="deldiv">
This is the second modal Exit by clicking on the "x" button at the top right coner.
<button id="xdel" onclick="myFunctiondelclose()">x</button>
</div>

</body>
</html>

Upvotes: 0

rajratna maitry
rajratna maitry

Reputation: 508

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

Upvotes: 1

MARSHMALLOW
MARSHMALLOW

Reputation: 1395

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>

Upvotes: 1

hosein in jast
hosein in jast

Reputation: 370

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>

Upvotes: 1

terrymorse
terrymorse

Reputation: 7086

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

Upvotes: 3

Related Questions