Question

我使用来自Jack Moore（http://www.jacklmoore.com/notes/jquery-modal-tutorial/）的jquery模态，当网站开始并且我正在使用年龄验证时，它会打开一个弹出式灯箱。我是设计师，我对js不太好，我认为这是一个简单的问题。

一切都很好，但我需要更改此JS，不要添加关闭按钮<a id="close" href="#">close</a>，而是选择我在HTML上创建的一个按钮<button id="close">SIM</button></p>

Plunker链接：http://plnkr.co/edit/fwPuvHzBxhTXdDxdLo0s?p=preview

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

HTML

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

Answer 1

试试这个，看看它是否适合你：

reachability?.stopNotifier()

// Code goes here

     
      

var $close = $('#close');

    var modal = (function(){
      var
      method = {},
      $overlay,
      $modal,
      $content;
      

      // 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 = $('#close');

      $modal.hide();
      $overlay.hide();
      $modal.append($content);
      

      $(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});
      });
    });

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B41800;
  opacity: 1;
  filter: alpha(opacity=50);
	z-index: 9000;
}
#modal {
	width: 480px !important;
  position:absolute;
  padding:8px;
	z-index: 9999;
}
#content {
  background:#000000;
  padding:20px;
}
#content #popup {
    text-align: center;
}
#popup h3 {
    margin-bottom: 16px;
}
p.politicauso {
    margin-top: 15px;
    margin-bottom: 0px;
}
#popup button {
    background-color: #B41800;
    border: none;
    padding: 12px;
    font-family: 'Diavlo Bold';
    font-size: 22px;
}
#popup button#close{
margin-left: 35px;} 

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B41800;
  opacity: 1;
  filter: alpha(opacity=50);
	z-index: 9000;
}
#modal {
	width: 480px !important;
  position:absolute;
  padding:8px;
	z-index: 9999;
}
#content {
  background:#000000;
  padding:20px;
}
#content #popup {
    text-align: center;
}
#popup h3 {
    margin-bottom: 16px;
}
p.politicauso {
    margin-top: 15px;
    margin-bottom: 0px;
}
#popup button {
    background-color: #B41800;
    border: none;
    padding: 12px;
    font-family: 'Diavlo Bold';
    font-size: 22px;
}
#popup button#close{
margin-left: 35px;}

模态Jquery - 更改js上的代码

1 个答案: