So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/
Related
I am trying to close a modal from within the parent.html with a button that is inside the <iframe>.
This is the modal I have in my parent.html.
<div class="modal fade" id="verificationModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<iframe id="myFrame" src="./pop.html"></iframe>
</div>
</div>
</div>
</div>
Button in parent.html to show the modal.
<button type="submit" id="submit-button" class="btn btn-light btn-md btn-block bt"
data-toggle="modal" data-target="#verificationModal">Continue</button>
Button in pop.html to hide the modal.
<button type="submit" id="pop_submit_button" class="btn btn-light btn-lg bt">Enter</button>
And this is the script in parent.html.
<script>
$(document).ready(function () {
$(window).load(function () {
$("#submit-button").click(function () {
$('#verificationModal').modal('show');
});
});
$("#myFrame").load(function () {
var doc = this.contentDocument || this.contentWindow.document;
var target = doc.getElementById("pop_submit_button");
$(target).click(function () {
$('#verificationModal').modal('hide');
});
});
});
</script>
I want to show the modal upon clicking the #submit-button that is in the parent.html and close the modal upon clicking #pop_submit_button that is within the frame pop.html. Though the showing part is working, I can't get the hiding part to work.
I'm creating a website using flask, HTML, CSS, and Javascript. I would like to add a function that shows a hidden div when selecting a specific option(In this case, if users select '2' the hidden div is shown). However, this function doesn't work.
The first-page userssee
if select 1, show nothing
if select 3, show a hidden div. But it doesn't work
Please help it :( Thank you!
<style>
.hidden{
display: none;
}
.show{
display: block;
}
</style>
<div class="modal fade" id="modalupdate{{data.id}}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">×</button>
<h4 class="modal-title">Update Information</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('update_ticket') }}" method="POST" id="update_form">
<select id="location">
<option value="val1">1</option>
<option value="val2">2</option>
</select>
<div class="hidden" id="val22">hello</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#modalupdate{{data.id}}').on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
$(this).find('#val22').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").removeClass("hidden");
$("div#val22").addClass("show")
} else {
$("div#val22").removeClass("show");
$("div#val22").addClass("hidden")
}
});
});
</script>
I am not a jQuery person, but it seems there is a lot of syntactical error in the code. It's the same with your "onChange" event and "Queryselector".
I have done the minimal changes in the syntax and get the result you want, you can definitely correct the rest of the code according to the standard that jQuery follows. -
here the corrected code [the onChange event for select#location querySelector]-
<script>
$(document).ready(function() {
let data = {
id: 2
};
$(`#modalupdate${data.id}`).on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").show();
} else {
$("div#val22").hide();
}
});
});
</script>
Hope it helps.
I have a piece of code that will create a contextual menu on right-click on one input in my page. The code is supposed to add "{Keyword: }" to the input. The problem is when I add the JS below all the modals that I use stop working (not displaying). The modals are activated by a button click.
Contexctual menu HTML:
<div id='cntnr'>
<ul id='items'>
<li>{Keyword:fallback}</li>
<li>{KeyWord:fallback}</li>
</ul>
</div>
Contexctual menu JS:
$("#headline11").on("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
$("#cntnr").fadeIn(200, startFocusOut);
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = document.getElementById("headline11");
setInputSelection(input1, 9, 10);
});
Button:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
The modal:
<div class="container">
<!-- Modal Preview-->
<div class="modal fade" id="build" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Your Campaign Preview1</h4>
</div>
<div class="modal-body">
<div id="hoursSaved"></div>
Some text here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
When I use {Keyword: Whatever here} in my input and submit, the modals stop working, but when I remove the JS above everything works, except the contextual menu of course.
It took me hours to debug my code and find what part of it is causing the problem, but I'm unable to understand why. Your help will be much appreciated.
Thank you,
EDIT: Here is a JsFiddle as requested in the comments. You'll have to run the code between each test to see the difference.
https://jsfiddle.net/yagami889/xpvt214o/470697/
You'll have to use the contextual menu to add the {Keyword:} you can enter whatever you want after ":", it won't work if you past it.
I found the answer. I had to use:
function startFocusOut(){
$("#cntnr").on("click",function(){
$("#cntnr").hide();
$("#cntnr").off("click");
});
}
Instead of:
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
I have a modal window build with CSS. The modal can be closed by clicking outside of it.
My solution to open the modal works, closing the modal works too, when the event listeners are added to the page separately. However, they don't work together. When both the listeners are added to the page, the modal won't open.
How can I make them to work together?
HTML
<a href="#openModal" id="modal-window" class="event test">
<div class="shorten-long-text test">
</div>
</a>
<div id="openModal" class="modalDialog Dialog1">
<div class="myModal">
<div class="modal-header">
</div>
<div class="modal-body row">
<div class="col-xs-6" >
</div>
</div>
<div class="modal-footer uppercase color-main">
</div>
</div>
</div>
JS
$(window).click(function(ev) {
if($(ev.target).attr('class') != ".Dialog1" ) {
$(".Dialog1").removeClass('isOpen');
$(".Dialog1").addClass('isClosed');
}
});
$(".test").click(function() {
$(".Dialog1").removeClass('isClosed');
$(".Dialog1").addClass('isOpen');
});
Use toggleClass()
html:
<div id="openModal" class="modalDialog isClosed Dialog1">
js:
$(window).click(function(ev) {
if(!$(ev.target).is('.Dialog1,.test') $(".Dialog1").toggleClass('isClosed isOpen');
}
});
$(".test").click(function() {
$(".Dialog1").toggleClass('isClosed isOpen');
});
I want to create a modal like Bootstrap ...
I have wrote this codes :
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
But I have a problem in understanding how to close & open it. I put a data-target for button to match with Modal Box ID & I don't display the modal from the beginning ..., So I wrote this code but It doesn't work ...
$('.modal').css('display', 'none');
$('button').click(function(){
var boxID = $(this).data('target');
var modalBox = $('.modal');
var modalBoxAttr = modalBox.attr('id');
if('boxID' == 'modalBoxAttr') {
modalBox.css('display', 'block');
}
});
There a few mistakes with your code.
Mistake 1:
Here:
if('boxID' == 'modalBoxAttr')
You are currently checking the strings and not the objects. What you have written is the following:
If the string "boxId" is equal to the string "modalBoxAttr" do something. And both strings are not the same, so you get a false result.
Mistake 2:
You are complicating the code too much.
You can just simplify it like this.
$('button').click(function(){
var boxID = $(this).data('target');
var boxObject = $(boxID);
if(boxObject.length) {
boxObject.toggle();
}
});
.modal { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
Use more often console.log() to debug your code and check if you are actually entering a specific section and if your logic is correct.
Try following approach.
Remove data-target="#myModal" from button
<button type="button" class="btn btn-primary">Open Modal</button>
Button click:
$('button').click(function(){
$("#myModal").modal('show');
}});