Javascript 模态Jquery-更改js上的代码
Im使用Jack Moore()中的jquery模式,它是一个弹出的灯箱,在网站启动时打开,Im用于年龄验证。我是一个设计师,我不太擅长js,我认为这是一个简单的问题 一切正常,但我需要更改此JS以不添加关闭按钮,而是选择我在HTMLJavascript 模态Jquery-更改js上的代码,javascript,jquery,Javascript,Jquery,Im使用Jack Moore()中的jquery模式,它是一个弹出的灯箱,在网站启动时打开,Im用于年龄验证。我是一个设计师,我不太擅长js,我认为这是一个简单的问题 一切正常,但我需要更改此JS以不添加关闭按钮,而是选择我在HTMLSIM卡上创建的一个按钮 Plunker链接: JS var modal = (function(){ var method = {}, $overlay, $modal, $content, $close; // Center t
SIM卡上创建的一个按钮
Plunker链接:
JS
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();
});
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$.get('ajax.html', function(data){
modal.open({content: data});
});
});
var modal=(函数(){
变量
方法={},
$overlay,
$modal,
$content,
$close;
//在视口中使模态居中
method.center=函数(){
左上角;
top=Math.max($(窗口).height()-$modal.outerHeight(),0)/2;
左=数学.max($(窗口).width()-$modal.outerWidth(),0)/2;
$modal.css({
top:top+$(窗口).scrollTop(),
左:左+$(窗口)。滚动左()
});
};
//打开模型
method.open=函数(设置){
$content.empty().append(settings.content);
$modal.css({
宽度:settings.width | |“自动”,
高度:设置。高度| |“自动”
});
方法。中心();
$(window.bind('resize.model',method.center));
$modal.show();
$overlay.show();
};
//关闭模式
method.close=函数(){
$modal.hide();
$overlay.hide();
$content.empty();
$(window.unbind('resize.modal');
};
//生成HTML并将其添加到文档中
$overlay=$('');
$modal=$('');
$content=$('');
$close=$('');
$modal.hide();
$overlay.hide();
$modal.append($content,$close);
$(文档).ready(函数(){
$('body')。追加($overlay,$modal);
});
$close。单击(功能(e){
e、 预防默认值();
方法close();
});
返回法;
}());
//在查询文档之前,请等待DOM已加载
$(文档).ready(函数(){
$.get('ajax.html',函数(数据){
打开({content:data});
});
});
HTML
VOCÊTEM 18 ANOS OU MAIS?
西蒙诺
为18个anos e concordar公司的网站提供网站指导
试试这个,看看它是否适合你:
//代码在这里
var$close=$(“#close”);
var modal=(函数(){
变量
方法={},
$overlay,
$modal,
$content;
//在视口中使模态居中
method.center=函数(){
左上角;
top=Math.max($(窗口).height()-$modal.outerHeight(),0)/2;
左=数学.max($(窗口).width()-$modal.outerWidth(),0)/2;
$modal.css({
top:top+$(窗口).scrollTop(),
左:左+$(窗口)。滚动左()
});
};
//打开模型
method.open=函数(设置){
$content.empty().append(settings.content);
$modal.css({
宽度:settings.width | |“自动”,
高度:设置。高度| |“自动”
});
方法。中心();
$(window.bind('resize.model',method.center));
$modal.show();
$overlay.show();
};
//关闭模式
method.close=函数(){
$modal.hide();
$overlay.hide();
$content.empty();
$(window.unbind('resize.modal');
};
//生成HTML并将其添加到文档中
$overlay=$('');
$modal=$('');
$content=$('');
$close=$(“#close”);
$modal.hide();
$overlay.hide();
$modal.append($content);
$(文档).ready(函数(){
$('body')。追加($overlay,$modal);
});
$close。单击(功能(e){
e、 预防默认值();
方法close();
});
返回法;
}());
//在查询文档之前,请等待DOM已加载
$(文档).ready(函数(){
$.get('ajax.html',函数(数据){
打开({content:data});
});
});
#覆盖{
位置:固定;
排名:0;
左:0;
宽度:100%;
身高:100%;
背景:#B41800;
不透明度:1;
过滤器:α(不透明度=50);
z指数:9000;
}
#模态{
宽度:480px!重要;
位置:绝对位置;
填充:8px;
z指数:9999;
}
#内容{
背景:#000000;
填充:20px;
}
#内容#弹出窗口{
文本对齐:居中;
}
#弹出窗口h3{
边缘底部:16px;
}
p、 政治原因{
边缘顶部:15px;
边缘底部:0px;
}
#弹出按钮{
背景色:#B41800;
边界:无;
填充:12px;
字体系列:“Diavlo Bold”;
字体大小:22px;
}
#弹出按钮#关闭{
左边距:35px;}
#覆盖层{
位置:固定;
排名:0;
左:0;
宽度:100%;
身高:100%;
背景:#B41800;
不透明度:1;
过滤器:α(不透明度=50);
z指数:9000;
}
#模态{
宽度:480px!重要;
位置:绝对位置;
填充:8px;
z指数:9999;
}
#内容{
背景:#000000;
填充:20px;
}
#内容#弹出窗口{
文本对齐:居中;
}
#弹出窗口h3{
边缘底部:16px;
}
p、 政治原因{
边缘顶部:15px;
边缘底部:0px;
}
#弹出按钮{
背景色:#B41800;
边界:无;
填充:12px;
字体系列:“Diavlo Bold”;
字体大小:22px;
}
#弹出按钮#关闭{
左边距:35px;}
VOCÊTEM 18 ANOS OU MAIS?
西蒙诺
为18个anos e concordar公司的网站提供网站指导
$('#popup strong').css({color:'red'});
$(“#关闭”)。单击(函数(e){
e、 预防默认值();
modal.close();
console.log('closed');
});
覆盖显示但内容隐藏,我尝试$modal.append($content)代码>仅删除$close,但不起作用。请立即尝试。确保代码中仍有此项:$(document.ready(function(){$.get('ajax.html',function(data){modal.open({content:data});})代码>我上传到plunker以便于你们的帮助
<div id='popup'>
<p><img src="img/logo.png" /></p>
<h3>VOCÊ TEM 18 ANOS OU MAIS?</h3>
<p><button id="close">SIM</button><button>NÃO</button></p>
<p class="politicauso">Este site é dirigido ao público adulto, só entre se você for maior de 18 anos e concordar com a <a href="#">POLÍTICA DE USO</a> do site.</p>
</div>