Javascript 模态Jquery-更改js上的代码

Javascript 模态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

Im使用Jack Moore()中的jquery模式,它是一个弹出的灯箱,在网站启动时打开,Im用于年龄验证。我是一个设计师,我不太擅长js,我认为这是一个简单的问题

一切正常,但我需要更改此JS以不添加关闭按钮,而是选择我在HTML
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>