Question

我改为使用模态。

我将此网站更改为BS4测试版。在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>

我在关闭正文标记之前的页面底部列出了BS .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>

我做错了什么？这曾经是Bootstrap 3时的工作。

Answer 1

似乎您的方法 popup 在全球范围内无法使用。

从我的控制台中查看错误： error console

当我点击例如Roswell Toyota的物品时，我有这个错误。

另外，您对此脚本有错误：

    $(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);
        }
      });
    });

您应该在＆＃34;）};＆＃34;

添加

Answer 2

我的朋友，有一个小分号错误.....

$(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);
  }
});

}）;

请参阅trigger("reset");

之后的第二行

并且请在jquery之后直接添加BS4 js这是一个很好的做法，它可能会导致意外错误......

弹出图像的图像Bootstrap 4 beta

2 个答案: