JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div class="hidden" id="content_free_products"><div class="object-container">
<div class="section-border search-form" id="ds_788899793">
<h3 class="section-title">
<a class="cm-combo-off cm-combination cm-save-state cm-ss-reverse" id="sw_s_b8be68c1d9a8caf646108e89778ed1a3">Search options</a>
</h3>
<div id="s_b8be68c1d9a8caf646108e89778ed1a3" class="section-body ">
<form action="index.php" name="advanced_search_form" method="get" class="cm-ajax">
<input name="search_performed" value="Y" type="hidden">
<input name="dispatch" value="products.picker" type="hidden">
<input name="display" value="options" type="hidden">
<input name="data_id" value="free_products" type="hidden">
<input name="result_ids" value="content_free_products" type="hidden">
<input name="skip_result_ids_check" value="true" type="hidden">
<input name="result_ids" value="pagination_free_products" type="hidden">
<div class="form-field">
<label for="match">Find results with:</label>
<select name="match" id="match" class="valign">
<option value="any">Any of these words</option>
<option value="all">All of these words</option>
<option value="exact">The exact phrase</option>
</select>
<input name="q" size="38" value="" class="input-text-large valign" type="text">
</div>
<div class="form-field">
<label>Search in:</label>
<div class="select-field">
<label for="pname">
<input name="pname" value="N" type="hidden">
<input value="Y" checked="checked" name="pname" id="pname" class="checkbox" type="checkbox">Product name
</label>
<label for="pshort">
<input value="Y" name="pshort" id="pshort" class="checkbox" type="checkbox">Short description
</label>
<label for="pfull">
<input value="Y" name="pfull" id="pfull" class="checkbox"...
CSS
.hidden {
display:none;
}
JavaScript
$("#content_free_products").dialog({modal: true});