I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.
For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010
Related
I would like assistance with code to put in elementor modal pop up box to show" Subscription Confirmed" confirmation that they have subscribed to newsletter here is the code I'm going to use for collecting emails its from the newsletter plugin:
<div class="tnp tnp-subscription"><form action="https://example.com/?na=s" method="post"><input
name="nlang" type="hidden" value="" />
<h1 style="text-align: center;"></h1>
<h3>Subscribe to get 20% off your first</h3>
<h3></h3>
<h3>order with mysite</h3>
<h3></h3>
<div class="tnp-field tnp-field-email"><label></label><input class="tnp-email" name="ne"
required="" type="email" /></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit"
value="Subscribe" /></div>
</form></div>
Thanks any help would be appreiated
You could use alert();
alert("Subscription confirmed!");
If that doesn't suit your likings, then I recommend seeing this, and you could customize the css of the box however you want.
I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
I have written a code to show popup using a bootstrap modal.
It worked, but all element is blocked. I don't know what wrong with my code.
Here is my code:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add data</h4>
</div>
<div class="modal-body">
<form method="post" name="insert_form" id="insert_form">
<label>Số thuê bao</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Speed number</label>
<input type="text" name="spd_number" id="spd_number" class="form-control" />
<br />
<label>Dial number</label>
<input type="text" name="dial_number" id="dial_number" class="form-control"/>
<br />
<input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can solve your issue,following this link.
bootstrap modal examples
As if have different css files,check that css files also.because some times you added classes or ID can be override.
Please check your code, I think the cause may be due to your code redundant or missing a close tag. Usually missing or excess div tags.
Bootstrap document indicate: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.You’ll likely run into issues when nesting a .modal within another fixed element.
If you realy can't find error, don't know whether parent container of id="add_data_Modal" against the Bootstrap's rules. Try below code:
$('#add_data_Modal').appendTo('body');
Using jquery to place your modal HTML to body. In case you can sure your modal HTML in a top-level position.
Update--------
If someone using Angular this works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #add_data_Modal element is created each and everytime.
This behavior causes duplication of the the elements and on occasion causes the wrong data to come up.
Fix this by clearing out the modal before append to body like below:
$('#"body>#add_data_Modal').remove();
$('#add_data_Modal').appendTo('body');
I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});
I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.