I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.
So...this is what is supposed to happen: A user clicks on a button that opens a normal Bourbon Refills Modal. Within that modal, the user has the option to click on a button to open an additional settings modal.
Currently I have one main modal and one nested inside of it. Sadly, the nested modal is constrained within the bounds of the first in Webkit and Gecko browsers. On IE...it doesn't at all :(
Is there any other way of pulling this off with Refills? I was thinking...maybe assigning a click event to the button to open a second (separate) modal that would sit on top of the first in z-index order?
Thanks in advance for your help - any is appreciated.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<!-- Begin Nested Modal 2 -->
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
<!-- End Nested Modal 2 -->
</div>
</div>
</div>
OK, I figured it out. Admittedly, this threw me off a bit because these are not JS-powered modals, but instead they rely on the ability to style an an element based on a hidden checkbox and its sibling element (in this case: < label >)
Easy-peasy. All we need to do is separate the modals and assign the :checked state to the hidden checkbox of the modal we want to open. For example:
First, separate the modals as you normally would. Then in Modal 1, create the link/button you want to have users click to open Modal 2. For the sake of argument, we will give it an ID of #update.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2-->
</div>
</div>
</div>
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
Now...write a little bit of jQuery to assign the :checked state to the appropriate modal.
$("#update").click(function() {
var modalTrigger = $("input#modal-2");
modalTrigger.prop("checked", !modalTrigger.prop("checked"));
});
Done. Now the second modal opens up correctly over the first. I just tested this and it works in most browsers (including IE9-11) since we're not doing anything different from the base refills modals.
Related
I have a Modal with some contents on it. When i click the cancel button, I want to clear and reset the contents of the modal. But the problem i face is, When i click the cancel button and reopen the modal, the contents still remain on the Modal.
I have attached the image of the Modal:
Before clicking Cancel Button:
After Clicking Cancel Button and reopening the modal, the contents still remain inside modal from the previous time, the image below shows it:
I have attached the code below:
HTML:
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<div class='dynamic_text' style='display:none;'></div>
<img class="modal-content" id="img01" src="fashion.jpg">
</div>
<div class="text_container">
<br>
<div class="img_text">
</div>
<div class="input_tag">
<span class="right_sec_text">Select a region from the picture</span>
<div class="error"></div>
<div class="tags" id ="tags"></div>
<div class="input_box">
<input type="text" name="tags" id="name_tag" class="input_textbox">
<button id="settag" class="btn_settag">Set Tag</button>
</div>
<div class="footer_btn">
<p><button class="btn_success" id="btn_add" value="add areas">Confirm Selection</button>
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
</div>
</div>
</div>
</div>
this is the code for the cancel button:
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
I have included this code :
Javascript:
$('.modal').on('hidden.bs.modal', function() { $(this).removeData(); });
Can someone help me to fix this problem to reset and close the modal window.
When a user clicks an option in a Bootstrap Multiselect dropdown a Bootstrap Toggle (http://www.bootstraptoggle.com/) Element BELOW is fired.
I'm not sure if this problem is specific to Bootstrap Multiselect and/or Bootstrap Toggle, or the interplay of the two - it is the only Element in my app that overlaps/hides other Elements.
The plugin works great...it's just that when you click Algebra (1 below) or really any option in the dropdown, the Bootstrap Toggles below (2 in the screenshot) are fired as if you clicked them directly.
How do I prevent this without a check-to-see-if-the-multiselect-is-open logic?
Adding HTML to address question...the divs were inside a single parent div and I moved them to be in separate Divs...same result: clicking the dropdown multiselect fires the listener on wordPref class.
<div class="row paddingMenu">
<div class='col-xs-12 alignleft'>
<b>Select</b> from <i>active</i> Libraries<a data-toggle="tooltip" data-placement="bottom" title="Click EDIT then ACTIVATE LIBRARIES to add and remove Libraries." tabindex="-1" class="pull-right"><span class="glyphicon glyphicon-info-sign pull-right" style="font-size: 15px"></span></a>:
</div>
<div class='col-xs-12 aligncenter'>
<div class='form-group'><select id='ddLibName' multiple='multiple'></select>
<div id='ddLibrarySelect'></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Choose whether to insert selected Comments as Word comment bubbles OR inline text.">
<input type="checkbox" id="insertMode" class="wordPref" data-toggle="toggle" data-size="small"
data-off="Inline" data-on="Comment"
data-offstyle="info" data-onstyle="success">
</div>
<div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Save document owner/author info with your usage statistics. This setting may be defined by your institution.">
<input type="checkbox" id="logMode" class="wordPref" data-toggle="toggle" data-size="small"
data-off="History OFF" data-on="History ON"
data-offstyle="info" data-onstyle="success">
</div>
<div class="col-xs-4 aligncenter">
<a class="btn btn-primary btn-sm" id="refreshBtn" data-toggle="tooltip" data-placement="bottom" title="Refresh AP to pull down any content changes or purchases." tabindex="-1">Refresh</a>
</div>
<div id='upsellMsgDiv' class='apSidebarAlert col-xs-12 hide'>
<div class="spacer-5"></div>
<div class="panel panel-warning">
<div class="panel-body highlight-cell">
<span class="apAlertMsg"></span>
<div id='closeAlertBtn' class='col-xs-12 spacer-5 hide'>
<button class='btn-sm btn-primary closeSidebarAlert pull-right' type='button'>Close</button>
</div>
</div>
</div>
</div>
</div>
I haven't used it but are those two inside a same div? Is one of them is a parent?.. Share your code as well... You can try doing
e.stopPropagation()
to the below div if the dropdown div is the parent div.
what I want, vertical menu:
menu item 1
menu item 2
user pressed menu item 1 and on the same page,
appear input dialogue between two menu items:
menu item 1
input field 1
input field 2
button
menu item 2
It is rather simple two create vertical menu list and
dialogue with such content, but how to combine them?
To achieve what you want you can try with an accordion menu, see the follow example:
$(document).ready(function(){
// init the accordion on the menu
$('.ui.accordion').accordion();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div class="ui vertical fluid accordion menu">
<div class="item">
<a class="title">
<i class="dropdown icon"></i>Menu item 1
</a>
<div class="content">
<div class="ui form transition hidden">
<form class="ui form">
<div class="field">
<label>Input field 1</label>
<input type="text" name="first-name" placeholder="Input field 1">
</div>
<div class="field">
<label>Input field 2</label>
<input type="text" name="last-name" placeholder="Input field 2">
</div>
<button class="ui button" type="submit">Button</button>
</form>
</div>
</div>
</div>
<div class="item">
<a class="title">
<i></i>Menu item 2
</a>
</div>
</div>
Hope it helps,
I have a row made of three buttons, and I need these three buttons to remain on the same row.
With that said, I am trying to make it so that each time one of these buttons is clicked, hidden content is displayed underneath them. Each button would show hidden content that is different from the other.
Is there anyway I can accomplish such a task using $(this) or must I assign a unique ID to each button and the relevant content it's supposed to show?
I have tried placing each button within a superclass called .items and the relevant content within this class as a child, called .description--so that I can access it using jQuery's .children() function--but this tends to mess up the row that my buttons are on (so that they are not all on the same row). Is there anyway to get around this?
What would be the simplest way to go about this?
Edit to show code:
<div class="displayers">
<div class="items">
<button type="button" class="btn btn-custom">Button 1</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 2</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 3</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
</div>
In order to make the buttons fit on the same row, I changed the ".items" class to have the property of "inline-block". The ".description" class is hidden, and I have some jQuery to reveal it.
var main = function() {
$('.items').click(function() {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem with this is that my buttons are no longer on the same row.
I like to use data attributes and css selectors (easy to change later on), so I would use:
$('[data-show]').on('click', function(e) {
var toShow = $( $(this).data('show') );
toShow.siblings().hide();
toShow.show();
});
li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<button data-show=".content > *:nth-child(1)">Open 1st</button>
<button data-show=".content > *:nth-child(2)">Open 2nd</button>
<button data-show=".content > *:nth-child(3)">Open 3rd</button></p>
<ul class="content">
<li>1st Container</li>
<li>2nd Container</li>
<li>3rd Container</li>
</ul>
Looks pretty simple to me, but does not mean others would agree. It really depends on your needs.
You can just toggle the elements which is next to your button with just class added to each element as below:
$('.btnshowdes').on('click',function(){
$(this).next('.desc').toggle();
});
.desc{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 1</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 2</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 3</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 4</div>
</div>
<br/>
</div>
FIDDLE DEMO
UPDATE
Based on your updated question to make it in the same row you just need to put an extra style to your .items as below:
.items{
display:inline-table; //helps to keep it in same row
padding:10px;//Just to make it feel good
}
Your js according to your html structure will be:
$('.btn-custom').on('click',function(){
$(this).next('.row').find('.description').toggle();
});
DEMO FIDDLE HERE
To solve your problem i would split my elements. Why don't you put each button in a different container (a div for instance), each container having his own id and his own content.
So when you click on a button you display the content inside of one div and the style of other buttons will not be affected.
Something like
<div class="container" id="1">
<button id="btn1"> Button one </button>
<!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
<button id="btn2"> Button two </button>
<!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->
So you don't have to worry and use complicated scripts, and each style will not be affected by the others modifications.
I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>
I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this: