显示自定义模态

Question

我有没有隐藏的引导模式。我的意思是没有通常被视为<div class="modal fade" role="dialog"> 的淡入淡出类。当用户单击按钮时，我想将模式显示为弹出窗口。下面的代码不起作用，因为它无法将其检测为模态。

JS

$(function(){
  $('.custom-modal').click(function(e){
    e.preventDefault();
    var mymodal = $('#myModal');
    mymodal.modal('show');
    
  });
})

HTML

<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Error</h4>
                </div>
                <div class="modal-body">
                    <p> </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

你能检查一下下面的代码吗？希望它对你有用。您只需添加class="modal fade" 和id="myModal" 即可完美运行。

请参考此链接：https://jsfiddle.net/yudizsolutions/2qfeagc5/

$(function() {
  $('.custom-modal').click(function(e) {
    e.preventDefault();
    var mymodal = $('#myModal');
    mymodal.modal('show');

  });
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>


<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Error</h4>
      </div>
      <div class="modal-body">
        <p> </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>