Bootstrap модальный не работает с помощью jquery

Question

Я создал модальную коробку начальной загрузки и ссылку привязки.Когда я щелкаю ссылку якоря, открывается модальное всплывающее окно.Я написал 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

Это не может работать, модал является 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, чтобы установить только один флажок за раз ... или когда вы открываете модальный сброс, флажок опоры проверен наfalse, сброс проверен ... Ciao