I have a bootstrap5 modal in which contact form 7 is added through shortcode. On successfully submission of form, it should display another modal having thank you message which is working fine.
But I want to hide the first modal (the contact form) when the second modal is displayed.
Here is the live link: https://onlinedemoserver.com/Techmatix/contact-us/ (You will find the form when you go to footer and click on Lets talk).
Here is the javascript code:
var footer_section = document.querySelector('.contact-footer .wpcf7');
if(footer_section){
footer_section.addEventListener( 'wpcf7mailsent', function( event )
{
$("#contactfooterform").modal("hide");
$("#contactfooterthankyou").modal("show");
}, false);
$("#contactfooterthankyou .send-btn").on("click", function()
{
$("#contactfooterthankyou").modal("hide");
});
}
Here is the HTML code:
<div class="container-fluid footer-bg-color">
<br>
<div class="pt-4">
<div class="row pl-4 footer-first-row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/logo.png">
</div>
<?php if ( ! is_active_sidebar( 'footer-1' ) ) {
return;
}
?>
<?php dynamic_sidebar( 'footer-1' ); ?>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 center-btn m-auto">
<div class=" footer-talk" data-toggle="modal" data-target="#contactfooterform" data-whatever="#mdo">
<div class="inner-circle">
<p class="footer-talk-text">
Lets talk!
</p>
</div>
</div>
</div>
<!-- Modal Popup for Lets Talk Start -->
<div class="modal fade" id="contactfooterform" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="container pop-up-wrap-body p-0 m-0">
<div class="container lets-talk-modal modal-content p-0 p-lg-5">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Let’s <span class="sub-heading-lets">talk!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Start a conversation around new business<br> opportunities</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap p-0 m-0">
<div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="22" title="Contact Form"]');?>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row thank-you">
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>1-888-251-1622<br> info#techmatix.nl</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal popup for Lets Talk End -->
<!-- Thank You Pop up Start -->
<div class="modal fade" id="contactfooterthankyou" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="container pop-up-wrap-body">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Thank <span class="sub-heading-lets">You!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Your message has been sent</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-footer thank-you-pop-up" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
<button type="button" class="btn btn-primary send-btn">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pop-up-footer-text">
<p>1-888-251-1622<br> info#techmatix.nl</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Thank You Pop up End -->
Note: The error I am getting on console when second modal appears is: Uncaught RangeError: Maximum call stack size exceeded.
I have fixed this issue on my own by removing show class from both modals when the second modal is closed and adding display none to backdrop div which was being created by modal at the end of body.
Related
I want to show data from Body Their id(name + type) to Model Body. also i want data in page body as label but in model as input.
I want when edit click on Edit Button and open model have data in card to edit it.
https://codepen.io/fadynabilofficial/pen/PobJvER
<div class="container px-4 py-5 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="card">
<div class="row">
<div class="col-lg-6">
<div class="row px-1">
<div class="form-group col-md-8">
<label class="form-control-label" id="name">Cheesecake With Flavor</label>
<label class="form-control-label" id="type">Chocola</label>
</div>
</div>
</div>
<div class="col-lg-3 mt-2">
<div class="row d-flex justify-content-between px-4">
</div>
<button class="btn-block btn-edit" type="button" data-toggle="modal" data-target="#exampleModal" id="submit">
Edit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<input id="name">
<br>
<button type="button" class="btn btn-success btn-sm" id="submit">
Submit
</button>
</div>
</div>
</div>
</div>
Trying to open Bootstrap's modal-content from another page, however it opens as new page instead of modal. Not sure why it is behaving like this.
Here is my code from page1:
<div class="text-center list-details" >
<h4>Time Frame: {{offer.delivery_duration? offer.delivery_duration : 'N/A'}}</h4>
<p> </p>
<a data-toggle="modal" href="brands/{{request.variant.model.brand.id}}/models/{{request.variant.model.id}}/variants/{{request.variant.id}}/requests/{{request.id}}/offers/{{offer.id}}/modal" data-target="#myModal" class="btn btn-success" role="button">View Full Offer</a>
</div>
<div id="myModal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content" style="border-radius: 0px;">
</div>
</div>
</div>
Here is the page2 which contains modal-content:
<div class="modal-header" style="background-color: #213a4c; color:white;">
<button type="button" class="close" data-dismiss="modal" style="color: #fff;">×</button>
<h4 class="modal-title" style="color: #fff;"><strong>{{brand.name}} {{model.name}} {{variant.name}}</strong></h4>
</div>
<div class="modal-body" style="padding: 0px;">
<div class="col-md-12">
<div class="col-md-12 text-center noside-padding">
<h2>{{brand.name}} {{model.name}} {{variant.name}}</h2>
</div>
<div class="col-md-6 n cardeal-detail">
<!-- first row -->
<div class="col-md-6 noside-padding">
<h5>Ex Showroom Price</h5>
</div>
<div class="col-md-6 noside-padding text-right ng-binding">
{{offer.ex_showroom_price | currency:"₹ "}}
</div>
</div>
</div>
</div>
<div class="modal-footer text-center" >
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Close</button>
</div>
Could you please anyone help me on this regard?? how do i get page2 as modal in page1.
I have divs, for select div I used jquery-ui selectable, I want to click on the div(clicked div drawing) and the modal is opened.
HTML
<div class="content">
<div id="selectable" class="right-content">
<div id="selectable" class="clickable row">
<div class="col-lg-1 table-bordered">1</div>
<br/><br/>
<div class="col-lg-2 table-bordered">2</div>
<br/><br/>
<div class="col-lg-2 table-bordered">3</div>
<br/><br/>
<div class="col-lg-2 table-bordered">4</div>
<br/><br/>
<div class="col-lg-2 table-bordered">5</div>
<br/><br/>
<div class="col-lg-1 table-bordered">6</div>
</div>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$( function() {
$("#selectable").selectable();
});
I've following HTML to show the bootstrap modal dialog:
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
Bootstrap modal dialog code is as below :
<div id="myModal-event" class="modal fade" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
and another code as follows :
<div class="modal-content">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
{$eventDetails.event_details.title}
<input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}">
</div>
<ul>
<li><img src="{$user_img_url}/time.png" alt=""> {$eventDetails.event_details.start_time_phrase_stamp}</li>
<li><img src="{$user_img_url}/calender.png" alt=""> {$eventDetails.event_details.start_time_phrase}</li>
{if $eventDetails.event_details.location}
<li>
<img src="{$user_img_url}/location.png" alt="">
{$eventDetails.event_details.location}
</li>
{/if}
{if $eventDetails.event_details.group_name}
<li><img src="{$user_img_url}/group_event.png" alt="">Group: {$eventDetails.event_details.group_name}</li>
{/if}
<li><button type="button" class="btn btn-info" data-toggle="popover">Edit Event</button></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item">Edit Event</a>
Invite Members
Delete Event
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;" >
<option value="0">I am..</option>
<option value="1" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} >Going</option>
<option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} >Maybe</option>
<option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}>Not Going</option>
</select>
</div>
<!--
<div class="form-group" align="right">
<select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
<option value=""></option>
<option value="edit_event">Edit Event</option>
<option value="invite_members">Invite members</option>
<option value="delete_event">Delete event</option>
</select>
</div>
-->
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li>Description</li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li>Not Going</li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane active" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{$eventDetails.event_details.description}
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.attending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.notComing_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
Now what's happening in my code is when user clicks on above
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
The first part of code opens up, then the data fetch is going on then suddenly the second part of code i.e. the data fetched gets added to the modal. I'm not understanding how this is happening.
The jQuery which is doing this is as follows but I didn't understand what it is doing when that hide event is being called etc. etc. Please clear my doubts by making me understand below code.
$('body').on('hidden.bs.modal', '.modal', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
Thanks.
This executes when the .modal (modal window) gets closed. So, whenever you open a modal window with the class modal (obviously), at some point it gets closed. When that modal window gets hidden (or closed) the event hidden.bs.modal gets triggered and the function gets executed.
This is not managed by the user (you didn't write explicit code) but the Bootstrap library has it built in.
From the Bootstrap Documentation:
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
Sample Code:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something when this modal window is closed...
});
To answer the queries in the comments, you have:
$("#myModal-event .modal-body").html(' Loading... '); sets the content of the modal window to be Loading....
$(this).removeData('bs.modal'); - This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content. See more at Clear Bootstrap Modal content after close.
I have an example modal here:
<!-- Large Modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img src="cat1.JPG" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<img src="cat2.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat3.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat4.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat5.JPG" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
When the modal opens, there is a title, a large picture (located on the left under the title), a brief description with some lines for added details, four pictures that are basically thumbnails directly under the main image, and some buttons to close the model or redirect the user to a different page.
Here's my question of sorts:
When a thumbnail (under the main image) is selected, I'd like that image to take the place of the larger image (aka take the main image stage). I appreciate the help!
try this:
$("#thumbnail1").click(function(){
$("#main_image").attr("scr", "source of image");
});
use id's corresponding to appropriate tag
Simple Pure Javascript would be
function imageSwap(catID) {
document.getElementById("largeCat").src = document.getElementById(catID).src;
};
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img id="largeCat" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2" onclick="imageSwap('smallCat1');">
<img id="smallCat1" src="http://placekitten.com/g/500/300" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat2');">
<img id="smallCat2" src="http://placekitten.com/g/500/400" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat3');">
<img id="smallCat3" src="http://placekitten.com/g/500/500" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat4');">
<img id="smallCat4" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>