如何在不在主体内添加任何代码的情况下创建弹出屏幕

Question

我需要创建一个弹出窗口而不在博德内添加任何代码。 我通过样式和Javascript创建它。我已经在体内添加了div。所以如何在不在代码体内添加div的情况下进行操作。

注意：身体内部不得添加任何代码。

＆＃13;

＆＃13;

// JavaScript Document
$(document).ready(function () {

    $('.price').mouseover(function() {
        $this = $(this);
        $parent = $this.parent(); // just to prevent so much jquery object creation
        var decide;
        if ($this.hasClass('price')) {
            decide = 'price';
        } else if ($this.hasClass('title')) {
            decide = 'title';
        }
        console.log(decide);

        if (decide == 'price') 
        {
          
           var result=  $parent.find('.price').text();
           var result_t=   $parent.find('.title').text();
        }     
$('#text').html('<form action="" method="">'+
'<div class="plugincss"><h2>Get an Instant Quote Texted to You!</h2></div>'+

'<div class="des"><div style="font-size:16px;padding-left:9px" id="errormsg"></div> '+
'<ul>'+
'<li>Select if you’d like a quote for a new or used vehicle</li>'+
'<li>Select the vehicle you’d like a quote for</li>'+
'<li>Enter your mobile number and a Quote will be texted to you instantly!</li>'+
'</ul>'+
'</div>'+
'<div class="car_detail"><p>Car Model Name : ' + result_t+'</p>'+
'<p>Price  : ' + result+'</p></div><br>'+

'<div class="car_detail">'+
'<table border="0" cellpadding="0" cellspacing="5" width="100%">'+
'<tbody>'+
'<tr>'+
'<td>'+
'<input placeholder="First Name"  type="text" id="firstname">'+
'</td>'+
'<td>'+
'<input placeholder="Last Name" type="text" id="lastname">'+
'</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>'+
'<div class="car_detail"><p>Enter your mobile number</p>'+
'<table border="0" cellpadding="5" cellspacing="5" width="100%">'+
'<tbody>'+
'<tr>'+
'<td width="25%"><input id="number1" style="width:82%" type="text"></td>'+
'<td width="25%"><input id="number2" style="width:92%" type="text"></td>'+
'<td width="25%"><input id="number3" type="text"></td>'+
'<td width="25%"><input type="button" class="submit" value="SUBMIT" id="reqquote" ></td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>'+
'<div class="fut"><a href="#">SMS &amp; Data Rates Apply</a> | <a href="#">Privacy</a> | <a href="#">Terms of Use</a></div>'+
'</form>');

           $('#reqquote').click(function() 
			{ 
				var Firstname = $("#firstname").val();
                var Lastname = $("#lastname").val();
			
			if (Firstname.length == 0 || Lastname.length == 0) 
		   {
			     
            $("#errormsg").css("color", "red");
            $("#errormsg").html('Your first and last name must be filled in.');
            return;
		   } 
		   
		    var txtNumber1 = $("#number1").val();
            var txtNumber2 = $("#number2").val();
            var txtNumber3 = $("#number3").val();

		   
		   if (txtNumber1.length != 3 || txtNumber2.length != 3 || txtNumber3.length != 4) {
            $("#errormsg").css("color", "red");
            $("#errormsg").html('Your full ten digit mobile number must be entered.');
            return;
        }
		
		$("#errormsg").css("color", "red");
		$("#errormsg").html('sending requests...');
        smsnumber = txtNumber1 + txtNumber2 + txtNumber3;
			
			 
			var varUrl = "https://services.prospectingdesk.com/pdeskwebapi/pdesklead/LeadMessage/newLead";
			
		    var	dealerid="1";
			var productid="1";
			var linkid="1";
			var newusedvehicle="N";
			var modelyear="2015";
			var make="Maruthi";
			var model="800";
			var trim1="SS";
			var ip="123.123.123.1";
			
			
			
			
var ExtUrl = varUrl + '?dealerid=' + escape(dealerid) + '&productid=' + escape(productid) + '&linkid=' + escape(linkid) + '&smsnumber=' + escape(smsnumber) + '&newusedvehicle=' + escape(newusedvehicle) + '&modelyear=' + escape(modelyear) + '&make=' + escape(make) + '&model=' + escape(model) + '&trim=' + escape(trim1) + '&Firstname=' + escape(Firstname) + '&Lastname=' + escape(Lastname) + '&ip=' + escape(ip);

          	
			$.ajax({
            type: "GET", url: ExtUrl, dataType: "jsonp",
            success: function (msg) {
				var data = JSON.stringify(msg);
			     alert(data);
				 alert('success');
                			
            },
		
            error: function (msg) {
                alert('fail');
            }
            });
			
						
            });
		


            
​            $('#modal').show();
            return false;
            });

            
         
			
			
			$(document).click(function(event) 
			{ 
            if(!$(event.target).closest('#modal').length) 
			{
		    $('#modal').hide();
			} 
			});
		
		
})

＆＃13;

@charset "utf-8";
/* CSS Document */
   .overlay-bg {
bottom: 35%;
right: 0px;
width: 600px;
height: 500px;
border-radius: 0px;
background-image: none;
cursor: auto;
position: fixed;
z-index: 10000;
transform: translateX(-424.5px) translateY(127.867px);
background-color: #FFF;
display:none;
        }

        .overlay-content {
width: 600px;
height: 500px;
border-radius: 4px;
background-color: #FFF;
padding: 20px 50px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
        }
.fancybox-margin{margin-right:17px;}		

＆＃13;

<div id="modal" class="overlay-bg"><div id="text" class="overlay-content"></div></div> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

而不是添加div并使用$("#modal")调用它，而不是在代码中创建它

var modal = $('<div id="modal" class="overlay-bg"><div id="text" class="overlay-content"></div></div>')