i need to get <div class="month">May 2015</div> and <div class="author">Alex Xander</div> by id="duyuru3483". How can i reach upper divs (XPATH code):
<div class="item">
<div class="dateBox">
<div class="month">May 2015</div>
<div class="day">07</div>
</div>
<div class="mainInfo">
<div class="title">
<a href="#" class="text-justify" data-toggle="modal" data-target="#duyuru3483">
2014-2015 Yılı Mezuniyet Töreni Hk.
</a>
<div class="modal fade" id="duyuru3483" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: #009E49;">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">
<div class="duyuruBaslik">2014-2015 Yılı Mezuniyet Töreni Hk.</div>
</h4>
</div>
<div class="modal-body">
<div class="duyuruMetni"> Mezuniyet törenine katılmak için yapılmasıgereken işlemler ve doldurulması gereken form ektedir. </div>
<hr>
<div class="author" > Ek : <a style="color:##428bca" href="../files/19_mezuniyet.rar">indir</a> </div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
</div>
<div class="author">Alex Xander</div>
One option is to use Ancestors:
var modal = doc.GetElementbyId("duyuru3483");
var parent = modal.Ancestors()
.Single(e => e.Attributes["class"] !=null &&
e.Attributes["class"].Value == "item");
Another option is to use XPath:
var parent = doc.DocumentNode
.SelectSingleNode("div[#class='item'][//div[#id='duyuru3483']]");
(you can algo get directly to .dateBox using:
div[#class='item'][//div[#id='duyuru3483']]/div[#class='dateBox']
And, of course, you can just use ParentNode, but that is less robust:
var parent = modal.ParentNode.ParentNode.ParentNode;
All of these get you to .item - it should be easy getting the data from there.
Related
I am using bootstrap 4 and I added a modal in my form in laravel project.
Code:
........
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
Basically, the data dismiss for close button is not working and nothing happens when I clicked it. I checked the bootstrap documentation and everything seems to be in order. Some of the solutions I have tried is removing fade class which does nothing. I also tried adding $('#closeButtonID').modal('hide'); but it does not seem to work as well.
How do I fix this?
Make sure If you use CDN then check you your internet connectivity or you use local library then try to go at view page source check that you local library correctly integrate with you webpage..
or I think you need to go through with below reference link try it
https://getbootstrap.com/docs/4.0/components/modal/
Can you try
$('#confirmOrder').modal('hide');
instead of
$('#closeButtonID').modal('hide');
Can you try giving it to the event handler of the button click as
$('. btn-secondary').on('click', function() {
$('#confirmOrder').modal('hide');
})
Try This
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30" data-target="#confirmOrder" data-toggle="modal">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
I am creating a confirm dialog using Bootstrap 4 and the code goes like this
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer">
<div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
The styling is working fine in chrome, firefox, edge but not working in IE
Chrome
IE11
Created a fiddle for the same.
Try the following HTML structure for "modal-footer"
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer justify-content-start">
<button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
<button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
display flex is not full support in IE.
i change footer display flex to block, then its work. check bellow code
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer d-block">
<div class="row">
<div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
I'm having trouble with these modals in bootstrap. I have set the id for both differently yet only the first one appears when the "more" button is pressed. The second button does not show the required modal.
<div id="tf-team" class="text-center">
<div class="overlay" id="team1">
<div class="container">
<div class="section-title center">
<h4>Something</h4>
<h2 class="white">The Team</h2>
<img src="img/daag.png" alt="">
</div>
</div>
<div id="team" class="owl-carousel owl-theme row">
<!-- Team One -->
<div class="item">
<div class="thumbnail">
<img src="img/team/01.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>CEO name</h3>
<p class="blue">CEO</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
</div>
</div>
</div>
<!-- Team Two -->
<div class="item">
<div class="thumbnail">
<img src="img/team/03.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Marketing Executive name</h3>
<p class="blue">Marketing Executive</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>
</div>
</div>
</div>
These are the modals that should be appearing. The first modal appears as normal but the second doesn't even though the ID's are different.
<!-- Modal One-->
<div id="myModal1" class="modal fade" role="dialog">
<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">text</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text</p>
<p><strong>text</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Two-->
<div id="myModal2" class="modal fade" role="dialog">
<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">Dana</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text
</p>
<p><strong>text Tick</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Does anyone have any ideas as to why this is happening?
You are just missing two closing </div> tags on the first modal.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="tf-team" class="text-center">
<div class="overlay" id="team1">
<div class="container">
<div class="section-title center">
<h4>Something</h4>
<h2 class="white">The Team</h2>
<img src="img/daag.png" alt="">
</div>
</div>
<div id="team" class="owl-carousel owl-theme row">
<!-- Team One -->
<div class="item">
<div class="thumbnail">
<img src="img/team/01.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Jim Rae</h3>
<p class="blue">CEO</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
</div>
</div>
</div>
<!-- Team Two -->
<div class="item">
<div class="thumbnail">
<img src="img/team/03.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Dana Apatachioae</h3>
<p class="blue">Marketing Executive</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>
</div>
</div>
</div>
<!-- Modal One-->
<div id="myModal1" class="modal fade" role="dialog">
<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">text</h4>
</div>
<div class="modal-body">
<p><strong>text</strong>
</p>
<p>text</p>
<p><strong>text</strong>
</p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- You are missing these two ending </div> tags. -->
</div>
</div>
<!-- Modal Two-->
<div id="myModal2" class="modal fade" role="dialog">
<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">Dana</h4>
</div>
<div class="modal-body">
<p><strong>text</strong>
</p>
<p>text
</p>
<p><strong>text Tick</strong>
</p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to show a modal on another modal while its still visible.
I am unable to understand what should I do. I tried z-index but its not working for me.
Any kind of guidance is much appreciated.
Check it out this
http://getbootstrap.com/javascript/#modals-examples
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
$(#id_name).modal("toggle") <-- popup
$(#id_name).modal("hide") turn off
try this
Data-dismiss: used for closing modal.
Data-toggle:used for popup modal.
<a data-dismiss="modal" data-toggle="modal" href="#ModalId">Click</a>
OR
you can use onclicke method.
<a id="ID" data-dismiss="modal" data-toggle="modal" onclick="functionShowModal()">Click</a>
Jscript
functionShowModal()
{
$("#ID").load("#ModalId");
}
You have to define z-index for them accordingly as well. You will find more about z-index here
I don't know if my Title is clear enough.
I try to explain myself with dome code
I have HTML Modal dialog like this
<div id="ModalGraficoCompLav_0" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type=?button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title'>Stato Componenti e Lavorazioni</h4>
</div>
<div id='ModalBody' class='modal-body'>
<div class='row'>
<div class='col-lg-6'> Componenti
<div id='GraficoComp0'class='ModalGraficoSmall'></div>
</div>
<div class='col-lg-6'>Lavorazioni
<div id='GraficoLav0'class='ModalGraficoSmall'></div>
</div>
</div>
</div>
<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
</div>
</div>
</div>
</div>
the 2 divs col-lg-6 will be filled with jquery flot plugin.
In my css I have these rules:
.ModalGraficoSmall { width: 200px; height:100px;}
Setting width and height is mandatory for jquery flot, If I doesn't set width or height the chart won't appear anymore.
Now, for completeness I put also jquery flot scripts
var opts = {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function (label, series) {
return '<div style="font-size:11px ;text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
threshold: 0.1
}
}
},
legend :
{
show: false
}
};
$.plot($("#GraficoComp0"), dataComp, opts);
$.plot($("#GraficoLav0"), dataLav, opts);
this is my result:
what I would like to obtain is this:
Try this setup, in the modal I have 2 panels, just fill in the panel bodies with your chart!
Code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart One</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart Two</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Read about the bootstrap grid system here