Question

我想创建一个类似Bootstrap的模态... 我写了这段代码：

<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>

<div class="modal fadeIn" id="myModal">
    <div class="modal-header">
        Roj Framework <span class="close-btn">&times;</span>
    </div>
    <div class="modal-content">
        Hi, This Roj Framework !
    </div>
    <div class="modal-footer">
        Continue ...
    </div>
</div>

但我在理解如何关闭＆amp;打开它。我把按钮的数据目标与Modal Box ID＆amp;我从一开始就没有显示模态......所以我写了这段代码，但它没有工作......

$('.modal').css('display', 'none');

$('button').click(function(){
    var boxID = $(this).data('target');
    var modalBox = $('.modal');
    var modalBoxAttr = modalBox.attr('id');
    if('boxID' == 'modalBoxAttr') {
        modalBox.css('display', 'block');
    }
});

Answer 1

您的代码存在一些错误。

错误1：

下面：

if('boxID' == 'modalBoxAttr')

您目前正在查看strings而不是objects。你写的是以下内容：

如果字符串“boxId”等于字符串“modalBoxAttr”做某事。两个字符串都不相同，因此您得到false结果。

错误2：

你的代码太复杂了。

你可以像这样简化它。

$('button').click(function(){
    var boxID = $(this).data('target');
    var boxObject = $(boxID);

    if(boxObject.length) {
        boxObject.toggle();
    }
});

.modal { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>

<div class="modal fadeIn" id="myModal">
    <div class="modal-header">
        Roj Framework <span class="close-btn">&times;</span>
    </div>
    <div class="modal-content">
        Hi, This Roj Framework !
    </div>
    <div class="modal-footer">
        Continue ...
    </div>
</div>

经常使用console.log()来调试代码并检查您是否实际输入了特定部分，以及逻辑是否正确。

Answer 2

尝试以下方法。

从按钮
中删除data-target =“＃myModal”

  <button type="button"  class="btn btn-primary">Open Modal</button>

按钮点击：

$('button').click(function(){
 $("#myModal").modal('show');
}});

如何关闭＆amp;打开像Bootstrap这样的模态

2 个答案: