Question

我创建了一个bootstrap模式框和锚链接。当我点击锚点链接时，它会打开模态弹出窗口。当点击链接锚链接以显示模态弹出窗口时，我写了jquery。能不能给我建议解决这个问题。

的index.html

<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind"><span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> <a  class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-weekly" value="newsletter-weekly"><span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label><a  class="pview" data-toggle="modal" href="#mprof" >preview</a></div>

的script.js

$(document).ready(function(){
        $(".pview").click(function(event){          
            if($(this).parent().find(':checkbox').is(':checked')){
                //alert('parent field is checked'); 
                $('#mprof').modal('show'); 
                console.log('if');
            }else{ 
                //alert('parent field is not hecked'); 
                $('#mprof').modal('hide');
                console.log('else');
            }
        });
    });

Answer 1

它无法正常工作，modal是一个html构造，你必须设置它就像它需要的那样，所以你需要html用于模态并改变javascript，因为你正在点击类pview这是不正确的....试试这个，看看差异......再见......

    <div class="update-heading">Email Updates</div>
    <div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
    <div class="checkbox_list">
        <input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind">
        <span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> 
    </div>
    <div class="checkbox_list">
        <input type="checkbox" name="newsletter-weekly" value="newsletter-weekly">
        <span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label>
    </div>

    <div class="modal bs-example-modal-md fade" id="mprof" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalMprof" >
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header"align="center">
            <h4 class="modal-title" id="myModalMprof">Modal</h4>
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times; </span>
                <span class="sr-only">Chiudi</span>
            </button>        
          </div>
          <b><div class="modal-body" id="contentModalMprof">
          </div></b>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>

JS：

    $(".checkbox_list").click(function(event){          
        if($(this).parent().find(':checkbox').is(':checked')){
            $('#contentModalMprof').html('preview'); 
            $('#mprof').modal('show'); 
        }else{ 
            $('#mprof').modal('hide');
        }
    });

我认为还有另一个问题，因为你正在查找复选框，如果选中模态打开，但是这样你可以选中两个复选框，也许它更好地使用单选按钮，或者你必须做一个js来只检查一个复选框...或者当你打开模态重置时，checkebox prop检查为false，重置检查... Ciao

Bootstrap模式不能使用jquery工作

1 个答案: