所以我的脚本在桌面上运行正常，但看起来当我在移动设备上打开链接时，它会在页面后面加载脚本，所以我无法看到它。有没有办法像桌面一样将脚本弹出窗口？
/* rates & packages section */
.packages {
width: 20.42%;
margin-left: -1px;
float: left;
background: #73c8ff;
color: #fff;
padding: 20px;
border: 1px #70A0BF solid;
text-align: center;
h2 {
color: rgba(255,255,255,.7);
}
.price {
font-weight: bold;
font-size: 2em;
}
button {
background: white;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button:hover {
background: black;
color: white;
}
}
.popular {
background-color: #6AFFB7;
color: black;
h2 {
color: black;
}
}<!-- some test stuff -->
<script>
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.empty().append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay, $modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
$overlay.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$.get('ajax.html', function(data){
modal.open({content: data});
});
$('#successMap').click(function(e){
modal.open({content: "<p>You know where you want to be. You just don’t know how to get there.</p><P>I can help.</p><P>If you were going to a new destination for the first time, you would likely look at a map (or use GPS). Why should your business be any different?</P><P>I will help you figure out exactly where you are at and provide you clear, actionable directions, to help get you closer to your desired destination.</P><p>The Success Map Session is perfect for you if:</p><ul><li>We’ve never worked together, and you want to work on a small 'test' project.</li><li>You know where you want your business or marketing to be, but are unsure or the best path to get there.</li><li>You have a single bio, email sequence, blog post, tagline, an opt-in offer, or some other chunk of copy written and you want me to look at it for emotional appeal and psychological impact. </li><li>You are trying to 'do-it-yourself' and have no idea where to start. I’ll help you map it out.</li><li>You want a brainstorming partner.</li><li>You want to discuss freelancing, copywriting, behavioral economics, social psychology, writing, the latest episode of The Walking Dead or House of Cards </li><li>You want a tutoring session on how to write with emotion, how to inject psychological triggers, or how to write with personality.</li></ul><P>This is an hour-long session.</P><p>Note: This session might be a little longer (at my expense) if I deem necessary to help you.</p>"});
e.preventDefault();
});
$('#officeHours').click(function(e){
modal.open({content: "<P>I work with you, 1 on 1, to elevate your marketing and copy with emotional magnetism and psychological triggers. I use the power of human psychology to craft copy that works through the art and science of ethical persuasion. </P><P>When you work with me, you get:</P><ul><li> “Big picture” consulting that solves business problems </li><li>An analytical and scientific approach, doing what is proven to work</li><li>Unique and tailored sales copy that meets your needs</li><li>Ownership of written content upon delivery and payment</li></ul><p>The Office Hour provides you a personal BEHAVIORAL MARKETING EXPERT to help you influence buyer behavior with your product or service.</p><p>Here are some things I can work on during a Professor Power Hour session:</p><ul><li>Your Bio or About Page</li><li>Email marketing strategy and implementation</li><li>Company Branding</li><li>Sales page, including a headline and subheadline</li><li>ANY copy that is not converting, is a jumbled mess, or that makes even your eyes glaze over</li><li>You need help creating one important, eyeball-grabbing, 'you had me at hello' piece of writing</li><li>Your tagline</li><li>Your opt-in offer</li><li>A product name</li><li>Blog post ideas that ROCK</li></ul><p>I will give you targeted word changes and suggestions to make it way more powerful, persuasive, and emotionally engaging. </p><p>I am not satisfied unless you are saying, 'You made me want to buy my product.'</p><p>NOTE: Know you’re going to want more than 1 hour? Get 3 hours for the special price of $675. That’s $75 off the normal total.</P>"});
e.preventDefault();
});
$('#bio').click(function(e){
modal.open({content: "<p>To capture a lead...<p>You have to capture their attention...<p>You have less than 2.7 seconds to get the job done.<p>This is less time than it takes to take a deep breath.<p>It might sound cliché, but…<p>You don't get a second chance to make a first impression.<p>What would you do if this happened to you:<p>I met this guy at an event. To be honest, I don't even remember his name. He handed me a business card. The card was frayed and worn around the edges and had a crease running down the middle, almost like it had been folded and then unfolded. I looked at the card and noticed that coffee or some other dark liquid had spilled on it, staining it a light brown. Then, I looked at the text. Can you believe that there were typos?<p>TYPOS!</p>Making matters worse, the text was illegible, with grammar and spelling problems throughout. The text just didn’t make sense. Adding insult to injury, the card had a musty odor; the kind of odor that reminds you of a damp, musty basement or a cave…<p>Would you call this guy?</p>If he doesn’t care enough to present himself in the best possible way. Will he care about your business or problems?<p>A good bio is not an expense. It is an investment.<p>Get this right the first time. The way you present your self builds rapport and trust. More importantly, it protects and preserves your image, reputation, and brand.<p>You need emotionally powerful and engaging copy that is tailored to you, your product, and your service. </p><p>When you work with me, we will:</p><ul><li>Discuss your audience, your message, and your background and work to align them so that visitors to your Bio or About Page see you as an added value</li><li>Write an emotionally engaging bio that is not ABOUT YOU, but ABOUT THEM – your audience</li><li>Write a bio or about page that is laser focused on achieving an objective</li></ul><P>On average, ONE bio or page takes ONE day.</p><p>Got more than one page to write? Let's talk.</p>"});
e.preventDefault();
});
$('#relationship').click(function(e){
modal.open({content: "<p>If you build relationships, success will follow.<p>You spent time, money, effort, and energy capturing the lead.<p>Now what?<p>You need to build and develop a long-term relationship built on trust.<p>I help you develop a strategy to build and cultivate these relationships through tailored email campaigns.<p>Whether you need a short email sequence for prospects that sign up for your list, a sales sequence to sell a product or service, or a year’s worth of emails for a campaign, I can help.<p>You know good copy is not an expense. It is an investment.<p>You need emotionally powerful and engaging copy that is created solely for your product or service. Copy that connects with your audience. Copy that solves a problem they have, but don’t want or copy that gives them something they want, but don’t have.<p>Together, we will deliver.<p>We will start by discussing your audience, your message, and your product or service so that we can develop a strategy for your email campaign. I then construct an email campaign that connects with your audience and meets the objectives.</p><p>This tailored option includes:</p><ul><li>The creation of email sequences, designed to keep your audience engaged with meaningful content</li><li>The creation of email sales sequences, designed to get your prospects to click “buy”</li><li>The creation of an entire email campaign</li><li>You are looking for a “done for you” lead generation campaigns</li></ul><P>The number of variables in this option are endless. Contact me to discuss how I can help you build enduring, meaningful and profitable relationships with your clients or prospects."});
e.preventDefault();
});
});
</script>
<!-- end test stuff -->
<div class="packages">
<h2>
Success Map Session
</h2>
<p class="price">
$150
</p>
<p>
You know where you want to be. I help you map out a path.
</p>
<button id="successMap">
Is this for me?
</button>
</div>
<div class="packages popular">
<h2>
Office Hours
</h2>
<p class="price">
<BR>$250
</p>
<p>
Let’s make your copy stand out, connect emotionally, sound like you, flow better, sell better.
</p>
<button id="officeHours">
Is this for me?
</button>
</div>
<div class="packages">
<h2>
Bio 2.0
</h2>
<p class="price">
<BR>$500
</p>
<p>
We will create an About Page or Bio that connects
</p>
<button id="bio">
Is this for me?
</button>
</div>
<div class="packages">
<h2>
E-Relationship
</h2>
<p class="price">
<BR>on request
</p>
<p>
Email campaigns that convert cold leads into hot buyers
</p>
<button id="relationship">
Is this for me?
</button>
</div>
答案 0 :(得分：0)
要使叠加层保留在前景中，您需要添加一些定位和z索引规则。
将此CSS添加到您的网站：
@media (max-width: 600px) { /* Set this to your preferred mobile width target */
#modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 500;
}
}