如何在单选按钮onchange()事件上加载自定义对话框

How to load a custom dialog box on a radiobutton onchange() event?

本文关键字：事件 加载 自定义 对话框 单选按钮 onchange      更新时间：2023-09-26

我在几个单选按钮上有一个onchange事件，调用一个名为dialogPopUp()的函数。目前这个函数显示一个工作正常的警告框。但是，我希望这个函数显示一个对话框。我已经尝试了几种解决方案，但似乎都不起作用。我希望对话框弹出，而不是打开一个新的窗口，其中窗口。打开。

下面是一个带有单选按钮的页面示例:

<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>

使用Jquery…这是可能的

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

我假设您的对话框已经隐藏。如果没有，这段代码将隐藏它

$("#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>

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

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

现在使用jQuery的。dialog方法来创建div

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

就这样了!

看看这个小提琴

:

jQuery mobile检查标签上的data-rel="dialog"属性，并显示一个对话框，如果它存在。如果我们添加那个对话框它就会显示为一个对话框。你也可以查看官方的jquery文档。

通过向页面锚链接添加data-rel="dialog"属性，任何页面都可以作为模态对话框呈现。当"dialog"属性被应用时，框架会添加一些样式来添加圆角，页面周围的边距和深色背景，使"dialog"看起来悬浮在页面上方。

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

不要厌倦弹出窗口。如今，许多浏览器都在屏蔽它们。而使用DIV，你可以简单地隐藏/显示在中心(或你需要它的地方)，无论如何，它将是模态的"基本上"(阻止用户看到页面内容-在它后面)

相关文章：