2017-10-17 8 views
4

모달을 사용하도록 변경되었습니다.팝업 이미지가있는 이미지 부트 스트랩 4 베타

이 웹 사이트를 BS4 beta로 변경했습니다. on this page 이미지를 클릭하면 이미지가있는 팝업 또는 모달이 열립니다.

<div class="row mb-2"> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/bluewater.htm')"><img src="photos/logo/bluewater.jpg" class="thumbnail img-fluid" alt="Bluewater Resort &amp; Casino"></a> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/semhardrock.htm')"><img src="photos/logo/hardrock.gif" class="thumbnail img-fluid" alt="Hard Rock Hotel &amp; Casino" ></a> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/trump.htm')"><img src="photos/logo/trump29.jpg" class="thumbnail img-fluid" alt="Trump 29 Casino"></a> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/bestwestern.htm')"><img src="photos/logo/bestwestern.gif" class="thumbnail img-fluid" alt="Best Western"></a> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/delsol.htm')"><img src="photos/logo/delsol.jpg" class="thumbnail img-fluid" alt="Casino Del Sol"></a> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-3 col-xs-4"> 
 
     <a href="javascript:popUp('ltrs/ag.htm')"><img src="photos/logo/ag.jpg" class="thumbnail img-fluid" alt="Apache Gold Resort Casino"></a> 
 
    </div> 
 
</div>

나는 닫는 body 태그 전에 페이지 하단에 나와있는 학사은 .js 있습니다.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 

내가 뭘 잘못하고 있니? 이것은 부트 스트랩 3 일 때 사용되었습니다.

+0

가 자동 재생 소리가 무엇을해야합니까 ... trigger("reset");

후 두 번째 마지막 줄에 참조하고, BS4가 할 수있는 좋은 방법이며 예기치 않은 오류가 발생할 수 있습니다 직선 JQuery와 후 JS 추가하십시오 그것으로? 방금 사이트에 갔다가 소리가 들리는 것을 원하지 않는 사람을 위해 경고를 게시했습니다. – mlegg

+0

자동 재생 소리가 더 이상 없습니다. – mlegg

+0

"해결됨"으로 제목을 변경하지 마십시오. https://stackoverflow.com/help/someone-answers – SiKing

답변

1

팝업은 전역 범위에서 사용할 수 없습니다.

내 콘솔에서 오류를 참조하십시오 error console

내가 예를 로스웰 도요타에 대한 항목을 클릭이 오류가 있습니다. ")};"

$(document).ready(function() { 
     $("#submit-button").on('click', function(e) { 
     e.preventDefault(); // Prevent form submission 

     // you would need to set the following values from your form fields 
     var name = $("#form_name").val(); 
     var email = $("#form_email").val(); 
     var phone = $("#form_phone").val(); 
     var message = $("#form_message").val(); 
     var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message; 

     $.ajax({ 
     type: "POST", 
     url: "contact.php", 
     data: dataString, 
     success: function() { 
      $(".messages").html("Thank you for contacting me. I will be in touch soon.").css("visibility", "visible"); 
      $("#submit-button").trigger("reset") 
     $('.messages').fadeTo("slow", 1).fadeTo(3000, 0); 
     } 
     }); 
    }); 

당신은에 추가해야합니다 :

플러스이 스크립트에 오류가

+0

스크립트가 사라 졌음을 참조하십시오. – mlegg

+0

어제 이상하게 느껴졌습니다. * popUp * 문제에 도움이 되었습니까? –

+0

아니요 : (팝업 창에서 모달 창으로 변경하기로 결정했습니다. 내 친한 친구를위한 오래된 사이트 였으므로 현대적인 코딩으로 변경해야한다고 말했습니다. 오늘은 페이지를 마무리하겠습니다. 다시 내가 붙어 있다면, 다시, 고마워. – mlegg

0

내 친구, ..... 세미콜론의 작은 오류가

$(document).ready(function() { 
$("#submit-button").on('click', function(e) { 
e.preventDefault(); // Prevent form submission 

// you would need to set the following values from your form fields 
var name = $("#form_name").val(); 
var email = $("#form_email").val(); 
var phone = $("#form_phone").val(); 
var message = $("#form_message").val(); 
var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message; 

$.ajax({ 
    type: "POST", 
    url: "contact.php", 
    data: dataString, 
    success: function() { 
    $(".messages").html("Thank you for contacting me. I will be in touch soon.").css("visibility", "visible"); 
    $("#submit-button").trigger("reset") 
    $('.messages').fadeTo("slow", 1).fadeTo(3000, 0); 
    } 
}); 

});