[英]image with pop up image Bootstrap 4 beta
我改為使用模態。
我把這個網站改成了 BS4 測試版。 在此頁面上,當您單擊圖像時,它應該會打開一個帶有圖像的彈出窗口或模式。
<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 & 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 & 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 時有效。
您的方法彈出窗口似乎在全局范圍內不可用。
從我的控制台查看錯誤:
當我單擊 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);
}
});
});
您應該在“)};”處添加
我的朋友,分號有一個小錯誤.....
$(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");
后的倒數第二行看到trigger("reset");
並且請在 jquery 之后直接添加 BS4 js 這是一個很好的做法,它可能會導致意外錯誤......
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.