Question

我在几个radiobuttons上有一个onchange事件，它调用一个名为dialogPopUp（）的函数。目前此功能显示一个工作正常的警报框。但是，我希望此功能显示一个对话框。我尝试了几种解决方案，但似乎没有任何效果。我希望弹出对话框，而不是打开 window.open 所做的新窗口。

以下是带有radiobuttons的页面示例：

<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<fieldset data-role="controlgroup">
    <legend>1. Har jag klart för mig vad uppdraget innebär?</legend>
        <input type="radio" name="radiogroup1" id="radio-choice-1" value="choice-1" />
        <label for="radio-choice-1">Ja</label>

        <input type="radio" name="radiogroup1" id="radio2" value="choice-2"  onchange="dialogPopUp()" /> 
        <label for="radio2">Nej</label>
    </fieldset>
    </div>
<div data-role="footer">
    <a href="#page2" class="ui-btn">Nästa fråga</a>
</div>
</div>

这里的功能是：

<script>
function dialogPopUp(){
    alert("asd");
}
</script>

这是我想要使用上一个方法加载的对话框：

 <div data-role="page" data-dialog="true" id="dialog1">
 <div data-role="header">
 <h1>Riskbedömning</h1>
 </div>
 <div data-role="main" class="ui-content">
 <form>
    <label for="danger">Fara:</label><input type="text" name="danger" id="danger"/>
            <label for="risc">Gradera risk:</label><select name="risc" id="risc">
                <option value="L">Låg</option>
                <option value="M">Medel</option>
                <option value="H">Hög</option>
            </select>
    <label for="measure">Förebyggande åtgärd:</label><input type="text" name="measure" id="measure"/>
    <a href="#page2" class="ui-btn">Nästa fråga</a>
    </form>
     </div>

    <div data-role="footer">
    <h1>Footer Text In Dialog</h1>
    </div>
    </div>

Answer 1

使用Jquery ......可能

<script>
 $(document).ready(function (){
   $('#dialog1').hide();
     $('#rbt').onChange(function (){
          $('#dialog1').show();
       });
 });
</script>

Answer 2

我假设你的对话框已经隐藏了。如果不是这个代码将隐藏它

$("#dialog1").fadeOut(0);

添加Jquery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
//This will hide the dialog
$("#dialog1").fadeOut(0);

//This will show your Dialog

$("#radio2").click(function(){
$("#dialog1").fadeOut(100);
});


});

</script>

Answer 3

首先，您必须使用display: none禁用对话框div。

<div data-role="page" data-dialog="true" id="dialog1" style="display:none">

现在只需对该div使用.dialog jQuery方法

$("#dialog1").dialog();

它和你已经完成了！

查看此Fiddle

<强>更新：

jQuery移动检查标记上的data-rel="dialog"属性，并显示一个对话框（如果存在）。如果我们添加该对话框，它将显示为对话框。您还可以查看官方jquery documentation。

通过添加data-rel =＆＃34;对话框，可以将任何页面显示为模态对话框＆＃34;属性到页面锚点链接。当＆＃34;对话框＆＃34;属性被应用，框架添加样式以添加圆角，页面周围的边距和深色背景来制作＆＃34;对话框＆＃34;似乎被暂停在页面上方。

检查修改后的fiddle。虽然我没有设置叠加层和其他东西，但它仍然有效

Answer 4

厌倦了弹出窗口。现在很多浏览器都在停止它们。而是使用一个你可以简单地隐藏/显示在中心（或你需要它的地方）的DIV，它无论如何都是模态的“基本上”（阻止用户看到页面内容 - 在它后面。）

如何在单击onchange（）事件上的单选按钮上加载自定义对话框？

4 个答案: