Display Popup when text is clicked in wordpress - text

I have a Html code In wordpress.:
'example'
When this "example" is clicked, it needs to show a popup window with some texts.
i came across some wordpress popup plugins like uji popup,etc..
they given some short codes. how can i use this shortcodes into my "href".
or any other plugins i can use, or any easy ideas to display popup when this text is clicked in wordpress?

Hi you can used bootstrap modal popup. as like demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>

Related

chrome button not click (element not visible) using VBA

im trying to click this specific button but it seems its not working can someone help me?
heres what i wrote
obj.FindElementByXPath("//button[#class='btn btn-warning waves-effect m-1' and #id='btn-create-beneficiary' and text()=' Create Beneficiary']").Click
<div role="tabpanel" class="tab-pane fade in active" id="benef_tab">
<div class="d-flex m-b-15" style="justify-content: flex-end;">
<button class="btn btn-warning waves-effect m-1" id="btn-create-beneficiary" data-toggle="modal" data-target="#createModal" style=""> Create Beneficiary</button>
<button class="btn btn-success waves-effect m-1" data-action="encoding-complete" style="display: none;"><i class="material-icons">done_all</i> Mark as Completed</button>
<button class="btn btn-warning waves-effect m-1" data-action="return-beneficiaries" data-id="15945" style="display: none;"><i class="material-icons">assignment_return</i> Return For Re-check</button>
<button class="btn bg-teal waves-effect m-1" data-action="undo-completeness" style="display: none;"><i class="material-icons">replay</i> Undo</button>
</div>
<div class="table-responsive">
<div id="benefTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="dt-buttons"><a class="dt-button buttons-excel buttons-html5 btn bg-pink waves-effect" tabindex="0" aria-controls="benefTable" href="#"><span>Excel Download</span></a></div><div id="benefTable_filter" class="dataTables_filter"><label>Filter Result <small class="text-muted">(ID,NAME)</small>:<input type="search" class="form-control input-sm" placeholder="" aria-controls="benefTable"></label></div><div id="benefTable_processing" class="dataTables_processing" style="display: none;"><div style="display: flex; align-items: center;">
<div class="preloader pl-size-xs">
<div class="spinner-layer pl-red-grey">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
VBA
First, set your reference to the Selenium WebDrive in the References tool...
Then the following code:
''*************************************************
Dim MyButton as Selenium.WebElement
Set MyButton = Obj.FindElementByCSS("#btn-create-beneficiary")
MyButton.Click

Can't click in input text fields in Bootstrap Modal

I have seen several similar posts to my issue and have tried suggestions but none of them are working and I am hoping that someone can help me. I have a simple modal which contains 2 text input fields. I have a button which user presses to launch the modal - but when modal launches I can't click in either of the fields contained within the form.
My modal is as follows:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="resetModalLabel">Reset Plan Duration</h5>
</div>
<div class="modal-body" style="width: 375px;">
<form>
<p class="text-dark">Modify quantities below to reset plan duration:</p>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Backward:</button>
</div>
<input id="planStart" name="planStart" tabindex=1 class="form-control" type="text" value="3" aria-describedby="prepend" />
</div> <!-- input-group.// -->
<div id="invalidstart" class="invalid-feedback pull-right">You must specify a valid number > 0.</div>
</div> <!-- form-group// -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Forward:</button>
</div>
<input id="planEnd" name="planEnd" tabindex=1 class="form-control" type="text" value="2" aria-describedby="prepend" />
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
</form>
</div>
<div class="modal-footer">
<button id="actionNo" type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetPlanDuration('cancel')">Cancel <i class="fa fa-times" aria-hidden="true"></i></button>
<button id="actionYes" type="button" class="btn btn-success" data-dismiss="modal" onclick="resetPlanDuration('reset')">Reset <i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>```
As I said, modal displays fine but I cannot modify values in form fields.

Blade Not Passing Data To Controller Laravel

This is my blade
<div class="modal fade" id="delete-document-modal-lg{{ $Document->id }}" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="{{ route('document-tracking.destroy',[$Document->id] )}}" enctype="multipart/form-data">
{{ csrf_field() }}
#method('DELETE')
<div class="modal-body"> You sure you want to delete PDN: <b>{{ $Document->PDN }}<b>?</div>
<div class="modal-footer">
<button type="button" class="btn gray btn-default" data-dismiss="modal"> Cancel </button>
<button type="SUBMIT" class="btn gray btn-danger"> Delete</button>
</div>
</form>
</div>
this is my controller
public function destroy( Document $Document) {
$this->authorize('delete', $Document);
$Document->delete();
return redirect()->route('document-tracking.index')->with ('success', 'Document Deleted Successfully!');
}
This is my route
Route::resource('document-tracking', ('App\Http\Controllers\DocumentTracking\DocumentController'));
when I return $document with this code
return $document;
i got the [ ] result.
Can anyone help me solve this. Thanks in advance

Selenium "get elements inside another element" in nodejs

I'm trying to click in the third input box but I can't use a xpath [3] because it's isolated by divs. How can I get the third "div class price filter" and then get the input?
<div class="search-prices">
<div class="search-price-header">
<h1>Bid Price:</h1>
<button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter">
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="search-price-header">
<h1>Buy Now Price:</h1><button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter"></div>
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button>
</div>
</div>
</div>
I tried something like
var priceFilter = driver.findElement(By.xpath("//div[#class='price-filter'][3]"));
var numericInput = priceFilter.findElement(By.xpath("//input[#class='numericInput']"))
numericInput.click();
But my click always happens in the first input, any idea why?
Try this and let me know whether this works or not.
var numericInput =priceFilter.findElement(By.xpath("(//input[#class='numericInput'])[3]"))
numericInput.click();
Try this xpath: (//div[#class='price-filter']//input)[3]
The xpath that works for me is:
//div[#class='price-filter'][3]//input[#class='numericInput']
thank you guys!

Better Search box for wordpress

Please take a look on this WordPress theme, when you click on search icon, a search box appear in the middle of page with a cool effect. I want to add this to my WordPress site. I have looked on google but still no luck,
Please suggest me a plugin or article.
Thanks
Hi There it work like this using bootstrap modal popup.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Search
</button>
<!-- 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 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">Search</h4>
</div>
<div class="modal-body">
<?php get_search_form(); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Resources